初入angularJS [4]

index.html

 1 <!DOCTYPE html>
 2 <html ng-app="demoApp">
 3 <head>
 4     <title>Using Angular JS Directives and Data Binging</title>
 5     <script src="./angular-1.0.1.min.js"></script>
 6 </head>
 7 <body>
 8 <div>
 9     <!-- Placeholder for views-->
10     <div ng-view=""></div>
11 </div>
12 <script>
13     var demoApp = angular.module("demoApp", []);
14 
15 
16     demoApp.config(function ($routeProvider) {
17         $routeProvider
18                 .when('/view1', {
19                     controller: 'SimpleController',
20                     templateUrl: 'view1.html'
21                 })
22                 .when('/view2', {
23                     controller: "SimpleController",
24                     templateUrl: 'view2.html'
25                 })
26                 .otherwise({redirectTo: '/view1'});
27     });
28 
29     demoApp.factory('simpleFactory', function () {
30         var customers = [
31             {name: 'John Smith', city: 'Phoenix'},
32             {name: 'John Doe', city: 'New York'},
33             {name: 'Jane Doe', city: 'San Francisco'}
34         ];
35         var factory = {};
36         factory.getCustomers = function () {
37             return customers;
38         };
39         factory.postCustomer = function (customer) {
40         };
41         return factory;
42     });
43 
44     demoApp.controller('SimpleController', function ($scope,simpleFactory) {
45         $scope.customers =[];
46         init();
47         function init(){
48             $scope.customers = simpleFactory.getCustomers();
49             console.info( $scope.customers );
50         }
51 
52         $scope.addCustomer = function () {
53             $scope.customers.push(
54                     {
55                         name: $scope.newCustomer.name,
56                         city: $scope.newCustomer.city
57                     });
58         };
59     });
60 </script>
61 
62 </body>
63 </html>
View Code

view1

 1 <div class="container" >
 2     <h2>View 1</h2>
 3     Name:
 4     <br/>
 5     <input type="text" ng-model="filter.name"/>
 6     <br/>
 7     <ul>
 8         <li ng-repeat="cust in customers | filter:filter.name | orderBy:filter.name">{{cust.name}}</li>
 9     </ul>
10     <br/>
11     Customer Name:<br/>
12     <input type="text" ng-model="newCustomer.name"/>
13     <br/>
14     Customer City:<br/>
15     <input type="text" ng-model="newCustomer.city" /><br/>
16     <button ng-click="addCustomer()">Add Customer</button>
17     <br/>
18     <a href="#/view2">View 2</a>
19 </div>
View Code

view2

 1 <!DOCTYPE html>
 2 <html ng-app="demoApp">
 3 <head>
 4     <title></title>
 5     <script src="./angular-1.0.1.min.js"></script>
 6 </head>
 7 <body>
 8 <div>
 9     Name:<br/>
10     <input type="text" ng-model="name" /><br/>
11     <ul>
12         <li ng-repeat="cust in customers | filter:name | orderBy:'name'">{{cust.name}}</li>
13 
14     </ul>
15 </div>
16 
17 </body>
18 </html>
View Code

 

posted @ 2014-01-01 10:18  yuluhuang  阅读(216)  评论(0)  编辑  收藏  举报