IT:AD:Angular.JS:HowTo:Understand/Routing and Views

(UP)

Summary

within it:

	<body>
		<div data-ng-app="App1">
			<section>
				<h5>Our MenuBar</h5>
				<nav>
					<ul>
					  <li><a href="#/foo">Foo<a></li>
					  <li><a href="#/bar">Bar<a></li>
					</ul>
				</nav>
			<section>
			<!-- Notice change: making a div as the place to render views: -->
			<div ng-view">...</callout>
		</div>
	<body>

#### Add Routing Module to App

	//Notice change: we are saying that this module has a dependency
	//on WellKnown name of ngRoute, which was defined in angular-route.js
	var app1 = angular.module('App1', ['ngRoute']);

#### Provision the Routes Table

	//Notice change: we are saying that this module has a dependency
	//on WellKnown name of ngRoute, which was defined in angular-route.js
	var app1 = angular.module('App1', ['ngRoute']);

	//Notice change: we are configuring app with a config method:
	app1.config(function($routeProvider){
		$routeProvider
			.when ('/foo',{
				//Note:Routes start with no slash
				templateUrl:'app/views/foo.html',
				controller: 'FooController'
			})
			.when ('/bar',{
				templateUrl:'app/views/bar.html',
				controller: 'BarController'
			})
			.otherwise ({
				templateUrl:'app/views/home.html',
				controller: 'HomeController'
			})
	});

#### Create Some Controllers For now, we'll put the controllers directly in the primary file:

	//note how '$scope' is mapped to $sc:
	app1.controller('SomeParentCtrl', ['$scope', function ($s) {
		$s.someText = "Three";
	}]);
	
	app1.controller('HomeController', ['$scope',function($scope){}]);
	app1.controller('FooController', ['$scope', function($scope){
			$scope.someNumber = 3;
			$scope.someObject = {
				first : 'John',
				last : 'Smith',
				full : function(){return this.first + ' ' + this.last;}
			};
	}]);
	app1.controller('BarController', ['$scope', function($scope){}]);

### Create the Views

  <h3>Foo</h3>

  <h3>Bar</h3>
  <callout icon="true" type="data-ng-controller="SomeParentCtrl">
    <!-- notice the name is made to fit controller -->
    <div data-ng-controller="FooController">
	<b>Scalar Binding:</b><br/>
	<div>Number:<span data-ng-bind="someNumber"/"></callout>
	<div>Text:<span data-ng-bind="someText"/></div>
	<!-- to object properties -->
	<div>First:<input data-ng-model="someObject.first"/></div>
	<!-- to behaviour -->
	<div>Last:<span data-ng-bind="someObject.full()"/></div>
    </div>
  </div>

  <h3>Home!</h3>

### All together

Put that all together, and you get:



    <head>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular-route.js"></script>
    </head>
    
    <body>
        <callout icon="true" type="data-ng-app="App1">
            <section>
                <h5>Our MenuBar</h5>
                <nav>
                    <ul>
                      <li><a href="#/foo">Foo<a></li>
                      <li><a href="#/bar">Bar<a></li>
                    </ul>
                </nav>
            <section>
            <!-- Notice change: making a div as the place to render views: -->
            <div ng-view">...</callout>
        </div>
    <body>
    
    <script>
    //Notice change: we are saying that this module has a dependency
    //on WellKnown name of ngRoute, which was defined in angular-route.js
    var app1 = angular.module('App1', ['ngRoute']);
    
    //Notice change: we are configuring app with a config method:
    app1.config(function($routeProvider){
        $routeProvider
            .when ('/foo',{
                //Note:Routes start with no slash
                templateUrl:'app/views/foo.html',
                controller: 'FooController'
            })
            .when ('/bar',{
                templateUrl:'app/views/bar.html',
                controller: 'BarController'
            })
            .otherwise ({
                templateUrl:'app/views/home.html',
                controller: 'HomeController'
            })
    });
    
    //note how '$scope' is mapped to $sc:
    app1.controller('SomeParentCtrl', ['$scope', function ($s) {
        $s.someText = "Three";
    }]);
    
    app1.controller('HomeController', ['$scope',function($scope){}]);
    app1.controller('FooController', ['$scope', function($scope){
            $scope.someNumber = 3;
            $scope.someObject = {
                first : 'John',
                last : 'Smith',
                full : function(){return this.first + ' ' + this.last;}
            };
    }]);
    
    app1.controller('BarController', ['$scope', function($scope){}]);
    </script>

IT:AD:Angular.JS:HowTo:Understand/Routing and Views

Summary

Notes

Notes