how to route multiple html pages correctly using angular

Question

I have a basic knowledge of AngularJS only. I have created one AngularJS application with multiple html pages. This is my main view html.Im so sorry my question is so long.But this is better way to ask my question.

Main.cshtml

    <html ng-app="myapp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Main</title>
    <!-- Main CDN Links-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.1/css/bootstrap-theme.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- end-->
    <link href="~/Content/Css/sidebar.css" rel="stylesheet" />
    <style>
        * {
            border-radius: 0 !important;
        }
    </style>
</head>
<body>
<div class="nav-side-menu">
 //some code
</div>
<div class="nav-top-menu nav-top">
 //some code
</div>
<div class="contents" id="subContents" ui-view>
 //route my sub views to here
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="~/Scripts/smart-table.debug.js"></script>
<script src="~/Scripts/MainView.js"></script>
</body>
</html>

MainView.js

var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/route1")
    $stateProvider
      .state('sideMenuCustomerDivition', {
          templateUrl: "Main/Customer"
      })
      .state('sideMenuDashboardDivition', {
          templateUrl: "Main/Staff"
      })
})

i have route my another html view into main.cshtml.This is html of that view

Customer.cshtml

<html>
 <body ng-app="customerTableApp">
  <div ng-controller="safeCtrl">

        <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
            <i class="glyphicon glyphicon-plus">
            </i> Add random item
        </button>

        <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
            <thead>
                <tr>
                    <th st-sort="firstName">first name</th>
                    <th st-sort="lastName">last name</th>
                    <th st-sort="birthDate">birth date</th>
                    <th st-sort="balance">balance</th>
                </tr>
                <tr>
                    <th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in displayedCollection">
                    <td>{{row.firstName}}</td>
                    <td>{{row.lastName}}</td>
                    <td>{{row.birthDate}}</td>
                    <td>{{row.balance}}</td>
                    <td>
                        <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                            <i class="glyphicon glyphicon-remove-circle">
                            </i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="~/Scripts/CustomerView.js"></script>
 </body>
</html>

CustomerView.js

var app = angular.module('customerTableApp', ['smart-table'])
app.controller('safeCtrl', ['$scope', function ($scope) {

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
    var id = 1;

    function generateRandomItem(id) {

        var firstname = firstnames[Math.floor(Math.random() * 3)];
        var lastname = lastnames[Math.floor(Math.random() * 3)];
        var birthdate = dates[Math.floor(Math.random() * 3)];
        var balance = Math.floor(Math.random() * 2000);

        return {
            id: id,
            firstName: firstname,
            lastName: lastname,
            birthDate: new Date(birthdate),
            balance: balance
        }
    }

    $scope.rowCollection = [];

    for (id; id < 5; id++) {
        $scope.rowCollection.push(generateRandomItem(id));
    }
    $scope.displayedCollection = [].concat($scope.rowCollection);
    $scope.addRandomItem = function addRandomItem() {
        $scope.rowCollection.push(generateRandomItem(id));
        id++;
    };
    $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }
}]);

I know the problem is ng-app routed into another ng-app.Anyone can give me better solution for this.Template already routed in to view. my problem is I can't assign values in to second view.Customer view is display in side main view.But assigned values not displayed.Browser shows that type of error.

Error: [ng:areq] http://errors.angularjs.org/1.3.9/ng/areq?p0=safeCtrl&p1=not%20aNaNunction%2C%20got%20undefined at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:6:416 at Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:19:417) at sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:20:1) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:76:95 at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:257 at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:7:408) at v (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:124) at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:52:9) at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:51:118

If Customer.cshtml is supposed to be a view, it should not be a full html document. Strip off the top level html and body tags, so the top level tag is div. — 1.618
– 1.618, Commented Jan 21, 2015 at 4:17

Anil Singh · Accepted Answer · 2015-01-21 04:17:10Z

It might Help you!!

var app = angular.module('MyApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('index', {
            templateUrl: 'index.html',
            controller: 'IndexCtrl'
          })
        .state('index.test', {
            url: '/',
            templateUrl: 'test.html',
            controller: 'TestCtrl'
          })
        .state('app', {
            templateUrl: 'app.html',
            controller: 'AppController'
          })
        .state('app.test2', {
            url: '/test2',
            templateUrl: 'test2.html',
            controller: 'Test2Controller'
          })
});

And the other example

$stateProvider
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          'top@index' : { templateUrl: 'tpl.top.html',},
          'left@index' : { templateUrl: 'tpl.left.html',},
          'main@index' : { templateUrl: 'tpl.main.html',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        },
      });

Sunde · Accepted Answer · 2015-01-21 04:13:31Z

I'm not entirely sure what your question is, but

One of the first things I'll note is that you should pass in the controller from the state. You can have .state('statename', { templateUrl: 'templateName', controller: controllerName });

Also, you can specify the url you want associated with the route by using the url tag inside the state config object.

.state('sideMenuCustomerDivition', { url: '/route1', templateUrl: 'Main/Customer', controller: 'safeCtrl' });

Now if you navigate to the route with url /route1, the template should be inserted in the ui-view

template already routed in to view. my problem is i cant assign values in to second view.

Collectives™ on Stack Overflow

how to route multiple html pages correctly using angular

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related