<div> <h2>View1</h2> Names: <br /> <input type="text" data-ng-model="filter.name" /> <br /> <ul> <li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> </ul> <br /> Customer Names:<br /> <input type="text" data-ng-model="newCustomer.name" /> <br /> Customer City:<br /> <input type="text" data-ng-model="newCustomer.city" /> <br /> <button data-ng-click="addCustomer()">Add Customer </button> <br /> <a href="#/view2">View 2</a> </div> <div> <h2>View2</h2> City: <br /> <input type="text" data-ng-model="city" /> <br /> <ul> <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li> </ul> </div>
通过$routeProvider来配置当前页面中view1 和view2 的路由，已经每个view所对应的controller。 view1和view2会显示在当前页面标注了ng-view的位置。
同时通过config我们解耦了controller和HTML标签。 上面的例子，我们需要给html标签添加ng-controller tag来使用controller。这边直接通过config完成这样的配置。
<!DOCTYPE html> <html data-ng-app="demoApp"> <head> <title>View</title> </head> <body> <div> <div data-ng-view=""></div> </div> <script src="https://www.jb51.net/angular.min.js"></script> <script src="https://www.jb51.net/angular-route.min.js"></script> <script> var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('https://www.jb51.net/', { controller: 'SimpleController', templateUrl: 'Partials/View1.html' }) .when('/view2', { controller: 'SimpleController', templateUrl: 'Partials/View2.html' }) .otherwise({redirectTo:'https://www.jb51.net/'}); }); var controllers = {}; controllers.SimpleController = function ($scope) { $scope.customers = [ { name: 'Terry Wu', city: 'Phoenix' }, { name: 'Terry Song', city: 'NewYork' }, { name: 'Terry Dow', city: 'NewYork' }, { name: 'Henry Dow', city: 'NewYork' } ]; $scope.addCustomer = function () { $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city }); }; } demoApp.controller(controllers); </script> </body> </html>
效果如下图。
最后一个实例更接近实际工程中的用法，我们引入了Factory来初始化数据（实际工程中,在这里可访问webAPI获取数据完成初始化），Controller中则通过Factory获得数据。
<!DOCTYPE html> <html data-ng-app="demoApp"> <head> <title>Using Factory</title> </head> <body> <div> <div data-ng-view=""></div> </div> <script src="https://www.jb51.net/angular.min.js"></script> <script src="https://www.jb51.net/angular-route.min.js"></script> <script> var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('https://www.jb51.net/', { controller: 'SimpleController', templateUrl: 'Partials/View1.html' }) .when('/view2', { controller: 'SimpleController', templateUrl: 'Partials/View2.html' }) .otherwise({ redirectTo: 'https://www.jb51.net/' }); }); demoApp.factory('simpleFactory', function () { var customers = [ { name: 'Terry Wu', city: 'Phoenix' }, { name: 'Terry Song', city: 'NewYork' }, { name: 'Terry Dow', city: 'NewYork' }, { name: 'Henry Dow', city: 'NewYork' } ]; var factory = {}; factory.getCustomers = function () { return customers; } return factory; }); var controllers = {}; controllers.SimpleController = function ($scope, simpleFactory) { $scope.customers = []; init(); function init() { $scope.customers = simpleFactory.getCustomers(); } $scope.addCustomer = function () { $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city }); }; } demoApp.controller(controllers); </script> </body> </html>
以上内容是小编给大家介绍的AngularJs 60分钟入门基础教程，希望对大家以上帮助！
您可能感兴趣的文章: