AngularJS route and view

Posted by On 9月 19, 2015 0 Comment

angular ngRoute

The ngRoute module provides routing and deeplinking services and directives for angular apps.
To use angualr route, we need to include both javascript

<script src="angular.js">
<script src="angular-route.js">

Example

This covers routing and view switch using ngRoute.
Main – Detail using data
This example is base on nodejs express
route.ejs

<!doctype html>
<html lang="en" ng-app="routeApp">
<head>
    <script src="/bower/angular/angular.min.js"></script>
    <script src="/bower/angular-route/angular-route.min.js"></script>
    <script src="/javascripts/route/app.js"></script>
    <script src="/javascripts/route/controller.js"></script>
    <link rel='stylesheet' href='/bower/bootstrap/dist/css/bootstrap.css' />
</head>
<body>

<div ng-view></div>

</body>
</html>

ng-view is template placeholder. It is managed in angular js code.

app.js(nodejs)

app.get('/routes', function(req, res, next) {
    res.render('routes', { title: 'Routing' });
});

public/javascripts/route/app.js

var app = angular.module('routeApp', ['ngRoute', 'controller']);

app.config(['$routeProvider', function($routeProvider){

    $routeProvider
        .when('/list', {
            templateUrl: 'partials/list.html',
            controller: 'listController'
        }).when('/list/:id', {
            templateUrl: 'partials/details.html',
            controller: 'detailController'
        }).otherwise({
            redirectTo:'/list'
        });
}]);

public/javascripts/route/controller.js

var controller = angular.module('controller', []);

controller.controller('listController',['$scope', '$http',
    function ($scope, $http) {
        $http.get('name.json').success(function(data) {
           $scope.people = data;
        });
    }
]);

controller.controller('detailController', ['$scope', '$routeParams',
    function($scope, $routeParams) {
        $scope.id = $routeParams.id;
    }
]);

public/partials/details.html

Hi, <span>{{id}}</span>

public/partials/list.html

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <!--Sidebar content-->

            Search: <input ng-model="query">
            Sort by:
            <select ng-model="orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
            </select>

        </div>
        <div class="col-md-10">
            <!--Body content-->

            <ul class="people">
                <li ng-repeat="person in people | filter:query | orderBy:orderProp" class="thumbnail">
                    <div>{{person.name}}</div>
                    <a href="#/list/{{person.name}}">{{person.nickname}}</a>
                    <p>{{phone.snippet}}</p>
                </li>
            </ul>

        </div>
    </div>
</div>

Ref

Angular JS Tutorial

TOPICS