码迷，mamicode.com
首页 > Web开发 > 详细

AngularJs实战

时间：2019-10-07 19:37:38      阅读：151      评论：0      收藏：0      [点我收藏+]

标签：原来   权限管理   out   重置   js使用   redirect   之间   form   type   

放弃了IE8，引入了单项数据绑定，删掉了过时的API

四大核心特性：MVC、模块化module、指令系统、双向数据绑定

1.小例子介绍：

1.MVC

是一种手段，为了模块化和复用。

HelloAngular_MVC.html

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="HelloAngular">
            <p>,Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_MVC.js"></script>
</html>

HelloAngular_MVC.js文件

function HelloAngular($scope) {
    $scope.greeting = {
        text: 'Hello'
    };
}

2.指令系统

HelloAngular_Directive.html

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

HelloAngular_Directive.js

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

3.双向数据绑定

(1)

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input ng-model="greeting.text"/>
            <p>,Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

(2)

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="CommonController">
            <div ng-controller="Controller1">
                <p>,Angular</p>
                <button ng-click="test1()">test1</button>
            </div>
            <div ng-controller="Controller2">
                <p>,Angular</p>
                <button ng-click="test2()">test2</button>
                <button ng-click="commonFn()">通用</button>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="MVC3.js"></script>
</html>

MVC3.js

function CommonController($scope){
    $scope.commonFn=function(){
        alert("这里是通用功能！");
    };
}
function Controller1($scope) {
    $scope.greeting = {
        text: 'Hello1'
    };
    $scope.test1=function(){
        alert("test1");
    };
}
function Controller2($scope) {
    $scope.greeting = {
        text: 'Hello2'
    };
    $scope.test2=function(){
        alert("test2");
    }
}

4.作用域问题

(1)

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="Scope1.css" />
    </head>
    <body>
        <div class="show-scope-demo">
            <div ng-controller="GreetCtrl">
                Hello !
            </div>
            <div ng-controller="ListCtrl">
                <ol>
                    <li ng-repeat="name in names">
                         from 
                    </li>
                </ol>
            </div>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="Scope1.js"></script>
</html>

Scope1.js

function GreetCtrl($scope, $rootScope) {
    $scope.name = 'World';
    $rootScope.department = 'Angular';
}
function ListCtrl($scope) {
    $scope.names = ['Igor', 'Misko', 'Vojta'];
}

程序中： $scope表示作用域； $rootScope表示根作用域； MVC全部借助于$scope实现的。

$scope：

$scope是POJO（plain old Javascript Object）

$scope提供了一些工具方法$watch()/$apply()

$scope表达式的执行环境（作用域）

$scope是一个树形结构，与DOM标签平行

子$scope对象会继承父$scope上的属性和方法

每一个Angular应用只有一个根$scope,一般位于ng-app上

$scope可以传播事件，类似DOM事件，可以向上或向下传播

$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础，对AngularJS非常重要。先创建$rootScope

可以用angular.element($0).scope()进行调试，获得当前元素上的scope

(2)

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="Scope1.css" />
    </head>
    <body>
        <div ng-controller="EventController">
            Root scope
            <tt>MyEvent</tt> count: 8
            <ul>
                <li ng-repeat="i in [1]" ng-controller="EventController">
                    <button ng-click="$emit('MyEvent')">
                        $emit('MyEvent')
                    </button>
                    <button ng-click="$broadcast('MyEvent')">
                        $broadcast('MyEvent')
                    </button>
                    <br>
                    Middle scope
                    <tt>MyEvent</tt> count: 8
                    <ul>
                        <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                            Leaf scope
                            <tt>MyEvent</tt> count: 8
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="Scope2.js"></script>
</html>

Scope2.js

function EventController($scope) {
    $scope.count = 0;
    $scope.$on('MyEvent', function() {
        $scope.count++;
    });
}

$emit只能向parent controller传递event与data

$broadcast只能向child controller传递event与data

$on用于接收event与data

在$on的方法中的event实践参数，其对象的属性和方法如下：

事件属性 目的
event.targetScope 发出或传播原始事件的作用域
event.currentScope 目前正在处理的事件的作用域
event.name 事件名称
event.stopPropagation() 一个防止事件进一步传播（冒泡、捕获）
event.preventDefault() 没有用
event.defaultPrevented 如果调用了preventDefault则为true
2.路由、模块、依赖注入源代码

路由设置app.js：

var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
]);
bookStoreApp.config(function($routeProvider) {
    $routeProvider.when('/hello', {
        templateUrl: 'tpls/hello.html',
        controller: 'HelloCtrl'
    }).when('/list',{
        templateUrl:'tpls/bookList.html',
        controller:'BookListCtrl'
    }).otherwise({
        redirectTo: '/hello'
    })
});

controllers.js:

var bookStoreCtrls = angular.module('bookStoreCtrls', []);
bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);
bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books =[
            {title:"《Ext江湖》",author:"大漠穷秋"},
            {title:"《ActionScript游戏设计基础（第二版）》",author:"大漠穷秋"},
            {title:"《用AngularJS开发下一代WEB应用》",author:"大漠穷秋"}
        ]
    }
]);

services.js：

var bookStoreServices = angular.module('bookStoreServices', []);
bookStoreServices.service('bookStoreService_1', ['$scope',
    function($scope) {}
]);
bookStoreServices.service('bookStoreService_2', ['$scope',
    function($scope) {}
]);

filters.js:

ar bookStoreFilters = angular.module('bookStoreFilters', []);
bookStoreFilters.filter('bookStoreFilter_1', ['$scope',
    function($scope) {}
]);
bookStoreFilters.filter('bookStoreFilter_2', ['$scope',
    function($scope) {}
]);

directives.js:

var bookStoreDirectives = angular.module('bookStoreDirectives', []);
bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
    function($scope) {}
]);
bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
    function($scope) {}
]);

booklist.html:(放在tpls文件夹下)

<ul>
    <li ng-repeat="book in books">
        书名:&nbsp;&nbsp;&nbsp;作者:
    </li>
</ul>

index.html:

<body>
    <div ng-view>
    </div>
</body>

(2)两种方式：

A；

<html ng-app="HelloAngular">
    <body>
        <div ng-controller="helloNgCtrl">
            <p>,Angular</p>
        </div>
    </body>
</html>


var helloModule=angular.module('HelloAngular', []);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
    $scope.greeting = {
        text: 'Hello'
    };
}]);

B:

<html ng-app>
    <body>
        <div ng-controller="HelloAngular">
            <p>,Angular</p>
        </div>
    </body>
</html>

function HelloAngular($scope) {
    $scope.greeting = {
        text: 'Hello'
    };
}
3.双向数据绑定

controllers.js:

bookStoreCtrls.controller('HelloCtrl', ['$scope',
    function($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
        $scope.pageClass="hello";
    }
]);
bookStoreCtrls.controller('BookListCtrl', ['$scope',
    function($scope) {
        $scope.books = [{
            title: "《Ext江湖》",
            author: "大漠穷秋"
        }, {
            title: "《ActionScript游戏设计基础（第二版）》",
            author: "大漠穷秋"
        }, {
            title: "《用AngularJS开发下一代WEB应用》",
            author: "大漠穷秋"
        }];
        $scope.pageClass="list";
    }
]);

index.js

<body>
    <div class="page " ng-view>
    </div>
</body>

(2)

<html ng-app="MyCSSModule">
    <body>
        <div ng-controller="CSSCtrl">
            <p class="text-">测试CSS样式</p>
            <button class="btn btn-default" ng-click="setGreen()">绿色</button>
        </div>
    </body>
</html>

var myCSSModule = angular.module('MyCSSModule', []);
myCSSModule.controller('CSSCtrl', ['$scope',
    function($scope) {
        $scope.color = "red";
        $scope.setGreen = function() {
            $scope.color = "green";
        }
    }
])

真正双向数据绑定的例子：

<html ng-app="UserInfoModule">
    <form ng-controller="UserInfoCtrl">       
        <label>邮箱：</label>
        <input type="email" ng-model="userInfo.email"> 
        <label>密码：</label>
        <input type="password" ng-model="userInfo.password">
        <label>
            <input type="checkbox" ng-model="userInfo.autoLogin">自动登录
        </label>               
        <button class="btn btn-default" ng-click="getFormData()">获取Form表单的值</button>
        <button class="btn btn-default" ng-click="setFormData()">设置Form表单的值</button>
        <button class="btn btn-default" ng-click="resetForm()">重置表单</button>
    </form>

var userInfoModule = angular.module('UserInfoModule', []);
userInfoModule.controller('UserInfoCtrl', ['$scope',
    function($scope) {
        $scope.userInfo = {
            email: "253445528@qq.com",
            password: "253445528",
            autoLogin: true
        };
        $scope.getFormData = function() {
            console.log($scope.userInfo);
        };
        $scope.setFormData = function() {
            $scope.userInfo = {
                email: 'damoqiongqiu@126.com',
                password: 'damoqiongqiu',
                autoLogin: false
            }
        };
        $scope.resetForm = function() {
            $scope.userInfo = {
                email: "253445528@qq.com",
                password: "253445528",
                autoLogin: true
            };
        }
    }
])

ng-bind的作用:防止程序可能出现的情况，可以用 <span ng-bind="greeting.text"></span>来代替：``````

ng-click

ng-class:中为元素添加类，有这个类则为true，否则为false。

<div ng-controller='HeaderController'>
    <div ng-class='{error: isError, warning: isWarning}'></div>
    <button ng-click='showError()'>Simulate Error</button>
    <button ng-click='showWarning()'>Simulate Warning</button>
</div>

.error { background-color: red; }
.warning { background-color: yellow; }

myCSSModule.controller('HeaderController', ['$scope',
    function($scope) {
        $scope.isError = false;
        $scope.isWarning = false;
        $scope.showError = function() {
            $scope.messageText = 'This is an error!';
            $scope.isError = true;
            $scope.isWarning = false;
        };
        $scope.showWarning = function() {
            $scope.messageText = 'Just a warning. Please carry on.';
            $scope.isWarning = true;
            $scope.isError = false;
        };
    }
])

ng-show等于true：显示，等于false：隐藏。

ng-hide与上面的相反

<div ng-controller='DeathrayMenuController'>
    <button ng-click='toggleMenu()'>Toggle Menu</button>
    <ul ng-show='menuState.show'>
        <li ng-click='stun()'>Stun</li>
        <li ng-click='disintegrate()'>Disintegrate</li>
        <li ng-click='erase()'>Erase from history</li>
    </ul>
<div/>

myCSSModule.controller('DeathrayMenuController', ['$scope',
    function($scope) {
        $scope.menuState={show:false};
        $scope.toggleMenu = function() {
            $scope.menuState.show = !$scope.menuState.show;
        };
    }
])
4.路由

为了解决这些问题：

A. ajax请求不会留下history记录，

B. 用户无法直接复制收藏URL

C. SEO搜索引擎优化（ajax对SEO不友好）

AngularJS中通过引入模块ui-router。

前端路由的基本原理：

A. 锚点#页面内导航，哈希#

B. HTML5中新的history API

C. 路由的核心是给应用定义“状态”

D. 使用路由机制会影响到应用的整体编码方式（需预先定义好状态）

E.考虑兼容性问题与“优雅降级”

（1）

.config(function($stateProvider,$urlRouterProvider){})

$urlRouterProvider.otherwise();一个参数，为路径

$stateProvider.state();两个参数，如下：

其中：ui-view代表被取代的地方，ui-sref代表连接地址

<html ng-app="MyUIRoute">
<div ui-view></div>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>

对于state1.html：

<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>

var myUIRoute = angular.module('MyUIRoute', ['ui.router', 'ngAnimate']);
myUIRoute.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/state1");//配置默认路径
    $stateProvider
        .state('state1', {
            url: "/state1",
            templateUrl: "tpls/state1.html"
        })
        .state('state1.list', {
            url: "/list",
            templateUrl: "tpls/state1.list.html",
            controller: function($scope) {
                $scope.items = ["A", "List", "Of", "Items"];
            }
        })
        .state('state2', {
            url: "/state2",
            templateUrl: "tpls/state2.html"
        })
        .state('state2.list', {
            url: "/list",
            templateUrl: "tpls/state2.list.html",
            controller: function($scope) {
                $scope.things = ["A", "Set", "Of", "Things"];
            }
        });
});

（2）

<a ui-sref="home">Home</a>    
<a ui-sref="about">About</a>  
<div ui-view=""></div>

home.html：

<a ui-sref=".list">List</a>
<a ui-sref=".paragraph">Paragraph</a>
<div ui-view></div>

about.html:

<div class="row">
    <div class="col-md-6">
        <div ui-view="columnOne"></div>
    </div>
    <div class="col-md-6">
        <div ui-view="columnTwo"></div>
    </div>
</div>

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'tpls2/home.html'
        })
        .state('home.list', {
            url: '/list',
            templateUrl: 'tpls2/home-list.html',
            controller: function($scope) {
                $scope.topics = ['Butterscotch', 'Black Current', 'Mango'];
            }
        })
        .state('home.paragraph', {
            url: '/paragraph',
            template: 'I could sure use a scoop of ice-cream. '
        })
        .state('about', {
            url: '/about',
            views: {
                '': {
                    templateUrl: 'tpls2/about.html'
                },
                'columnOne@about': {
                    template: '这里是第一列的内容'
                },
                'columnTwo@about': {
                    templateUrl: 'tpls2/table-data.html',
                    controller: 'Controller'
                }
            }
        });
});
routerApp.controller('Controller', function($scope) {
    $scope.message = 'test';
    $scope.topics = [{
        name: 'Butterscotch',
        price: 50
    }, {
        name: 'Black Current',
        price: 100
    }, {
        name: 'Mango',
        price: 20
    }];
});

(3)

var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/index');
    $stateProvider
        .state('index', {
            url: '/index',
            views: {
                '': {
                    templateUrl: 'tpls3/index.html'
                },
                'topbar@index': {
                    templateUrl: 'tpls3/topbar.html'
                },
                'main@index': {
                    templateUrl: 'tpls3/home.html'
                }
            }
        })
        .state('index.usermng', {
            url: '/usermng',
            views: {
                'main@index': {
                    templateUrl: 'tpls3/usermng.html',
                    controller: function($scope, $state) {
                        $scope.addUserType = function() {
                            $state.go("index.usermng.addusertype");
                        }
                    }
                }
            }
        })
        .state('index.usermng.highendusers', {
            url: '/highendusers',
            templateUrl: 'tpls3/highendusers.html'
        })
        .state('index.usermng.normalusers', {
            url: '/normalusers',
            templateUrl: 'tpls3/normalusers.html'
        })
        .state('index.usermng.lowusers', {
            url: '/lowusers',
            templateUrl: 'tpls3/lowusers.html'
        })
        .state('index.usermng.addusertype', {
            url: '/addusertype',
            templateUrl: 'tpls3/addusertypeform.html',
            controller: function($scope, $state) {
                $scope.backToPrevious = function() {
                    window.history.back();//返回上一级
                }
            }
        })
        .state('index.permission', {
            url: '/permission',
            views: {
                'main@index': {
                    template: '这里是权限管理'
                }
            }
        })
        .state('index.report', {
            url: '/report',
            views: {
                'main@index': {
                    template: '这里是报表管理'
                }
            }
        })
        .state('index.settings', {
            url: '/settings',
            views: {
                'main@index': {
                    template: '这里是系统设置'
                }
            }
        })
});

为多层路由嵌套。

5.指令（最复杂）

第三方指令库

restrict：参数有四种:A：属性,E：元素,C：类,M：注释,

templateUrl：

<body>
    <hello></hello>
</body>

//注射器加载完所有模块时，此方法执行一次
myModule.run(function($templateCache){
    $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");
});
myModule.directive("hello", function($templateCache) {
    return {
        restrict: 'AECM',
        template: $templateCache.get("hello.html"),
        replace: true
    }
});

(2)

ar myModule = angular.module('MyModule', ['ui.bootstrap']);
myModule.controller('AccordionDemoCtrl', ['$scope',
    function($scope) {
        $scope.oneAtATime = true;
        $scope.groups = [{
            title: 'Dynamic Group Header - 1',
            content: 'Dynamic Group Body - 1'
        }, {
            title: 'Dynamic Group Header - 2',
            content: 'Dynamic Group Body - 2'
        }];
        $scope.items = ['Item 1', 'Item 2', 'Item 3'];
        $scope.addItem = function() {
            var newItemNo = $scope.items.length + 1;
            $scope.items.push('Item ' + newItemNo);
        };
        $scope.status = {
            isFirstOpen: true,
            isFirstDisabled: false
        };
    }
])

(3)

指令系统不想全部覆盖原来的指令，就要加上ng-transclude

.directive(‘accordion’,function(){ return {}; })

replace:如果replace为true，则将模板将会替换当前元素，而不是作为子元素添加到当前元素中。

template:如果replace为true，则将模板内容替换当前的HTML元素，并将原来的元素的属性、class一并迁移；如果为false，则将模板元素当前当前元素的子元素处理。

templateUrl：和template基本一致，但模板通过指定的URL进行加载。因为模板加载时异步的，所以comilation、linking都会暂停，等待加载完毕后再执行。

transclude:编译元素的内容，使它能够被directive所用。需要配合ngTransclude使用（引用）。transclude的优点是linking function能够得到一个预先与当前scope绑定的transclusion function。

true - 转换这个directive的内容。 ‘element’ - 转换整个元素，包括其他优先级较低的directive。

require:请求另外的controller，传入当前directive的linking function中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。 ？—不要抛出异常。这使这个依赖变成一个可选项 ^ —允许查找父元素的controller

scope:true - 将为这个directive创建一个新的scope。如果在同一个元素中有多个directive需要新的scope的话，它还是只会创建一个scope。新的作用域规则不适用于根模版（root of the template），因此根模版往往会获得一个新的scope。

controller:- controller 构造函数。controller会在pre-linking步骤之前进行初始化，并允许其他directive通过指定名称的require进行共享（看下面的require属性）。这将允许directive之间相互沟通，增强相互之间的行为。controller默认注入了以下本地对象：

$scope - 与当前元素结合的scope

$element - 当前的元素

$attrs - 当前元素的属性对象

$transclude - 一个预先绑定到当前转置scope的转置linking function :function(cloneLinkingFn)

conplite:这里是conpile function

link:这里是link function，这个属性仅仅是在compile属性没有定义的情况下使用。 —

<html ng-app="expanderModule">
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                
            </expander>
        </accordion>
    </body>
</html>

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion',function(){
    return {
        restrict:'EA',
        replace: true,
        transclude: true,
        template: '<div ng-transclude></div>',
        controller: function(){
            var expanders = [];
            this.gotOpened = function(selectedExpander){
                angular.forEach(expanders,function(expander){
                        if(selectedExpander != expander){
                            expander.showMe = false;
                        }
                    });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});
expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                  * '<div class="title" ng-click="toggle()"></div>'
                  * '<div class="body" ng-show="showMe" ng-transclude></div>'
                  * '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                accordionController.gotOpened(scope);
            }
        }
    }
});
expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];
});

2.5节不是很懂！！！

2.6 Service与Provider

（1）HTTP请求

<div ng-controller="LoadDataCtrl">
    <ul>
        <li ng-repeat="user in users">
            
        </li>
    </ul>
</div>

myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){
    $http({
        method: 'GET',
        url: 'data.json'
    }).success(function(data, status, headers, config) {
        console.log("success...");
        console.log(data);
        $scope.users=data;
    }).error(function(data, status, headers, config) {
        console.log("error...");
    });
}]);

data.json：

[{
    "name": "《用AngularJS开发下一代WEB应用》"
},{
    "name": "《Ext江湖》"
},{
    "name": "《ActionScript3.0游戏设计基础（第二版）》"
}]

（2）filters

<body>
    大漠穷秋
</body>

myModule.filter('filter1',function(){
    return function(item){
        return item + 'o(∩_∩)o';
    }
});

（3）factory

<div ng-controller="ServiceController">
    <label>用户名</label>
    <input type="text" ng-model="username" placeholder="请输入用户名" />
    <pre ng-show="username"></pre>
</div>

myServiceApp.factory('userListService',['$http',
    function($http){
        var doRequest = function(username,path) {
            return $http({
                method:'GET',
                url:'users.json'
            });
        }
        return {
            userList: function(username) {
                return doRequest(username,'userList');
            }
        };
    }
]);
myServiceApp.controller('ServiceController',['$scope','$timeout',
    function($scope,$timeout,userListService) {
        var timeout;
        $scope.$watch('username',function(newUserName) {
            if(newUserName) {
                if(timeout) {
                    $timeout.cancel(timeout);
                }
                timeout = $timeout(function() {
                    userListservice.userList(newUserName)
                        .success(function(data,status) {
                            $scope.users = data;
                        });
                },350);
            }
        });
    }
])

2.7未看

AngularJS中文网

AngularJs使用了不同的方法，他尝试去弥补HTML本身在构建方面的缺陷。AngularJS通过使用我们成为标识符的结构，让浏览器能够识别新的语法。

例如:

1.使用双大括号语法进行数据绑定

2.使用DOM控制结构来实现迭代或者隐藏DOM片段

3.支持表单和表单的验证

4.能将逻辑代码关联到相关的DOM元素上

5.能将HTML分组成可重用的组件

特点： 构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、数据验证、路由、深度连接、组件重用、依赖注入。

<html ng-app>

当加载页面时，标记ng-app告诉AngularJS处理整个HTML页并引导应用。

绑定动态文本``````

双向数据绑定：

Your name:<input type="text" ng-model="yourname" placeholder="world">
<hr>
hello !


<script src="lib/angular/angular.js"></script>

这行代码载入angular.js脚本，当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本，angular.js脚本运行后将会寻找含有ng-app指令的HTML标签，该标签即定义了AngularJS应用的作用域。

AngularJS基础（智课网）

AngularJS有五个主要核心特性：

1.双向数据绑定—实现了把model和view完全绑定在一起，model变化，view也变化，反之亦然。

2.模板—在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AngularJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。

3.MVVM—吸收了传统的MVC设计模式针但有病不执行传统意义上的MVC，更接近于MVVM

4.依赖注入—AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用

5.指令—可以用来创建自定义的标签，也可以用来装饰元素或操作DOM属性。

原文:大专栏  AngularJs实战


AngularJs实战

标签：原来   权限管理   out   重置   js使用   redirect   之间   form   type   

原文地址：https://www.cnblogs.com/wangziqiang123/p/11631684.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！