AngularJS基础知识

AngularJS

概念

• 一款优秀的前端JS框架
• 伪静态文本展示设计的声明式语言

优点

• 为了克服HTML在构建应用上的不足
• 开发周期短
• 完成相同功能的代码量少

使用场景

• web开发
• SPA（single web page application） 单页面应用
• 混合APP开发

对比

• JavaScript : 刀耕火种
• 函数类库（JQuery）: 铁犁牛耕
• 框架（AngularJS）: 机械化种地

缺点

• 不适用DOM操作频繁的操作（游戏和网页编辑器等）

框架

• AngularJS
• VueJS
• Backbone

历史

• 2009年 Misko Hevery创建，后被Google收购并用于很多Google项目
• 数据：17000 6 1500 3
• 学习版本：1.5.8

下载

• npm install angular

主要内容

1.指令

1.1 系统指令

• 渲染指令(解释)
  
  • ng-app:定义angularjs生效的范围
  • ng-model:定义模型数据
  • ng-controller:定义控制器（$scope）
  • ng-bind:绑定文本模型 等价于：{{}}
• 事件指令
  
  • ng-click
  • ng-mouseover|mouseout|mouseenter|mouseleave
  • ng-submit
  • ng-change:
• 节点指令-DOM操作
  
  • ng-checked
  • ng-switch/ng-switch-when
  • ng-style
  • ng-class
  • ng-hide/ng-show
  • ng-href/ng-src
  • ng-repeat ng-repeat=”user in userlist” [{},{},{}]
  • ng-include

1.2 自定义指令

// HTML代码// 标签指令// class指令
// 属性指令
// 注释指令

2.服务(Service):控制器都可以使用的数据，就定义为服务

2.1 系统服务

• $http(ajax)
• $timeout
• $interval

$http服务：(Promise)$http.get(url, [config]).then(successCallback, errorCallback)$http.post(url[,data][, config]).then(successCallback, errorCallback)$timeout/$interval:执行结束之后会自动触发脏值检测setTimeout/setInterval:也会执行，但是不会触发脏值检测，不能同步更新视图

2.2 自定义服务

// 1.新建模块var app = angular.module('myApp', []);// 2.新建服务:// 使用service创建的服务最终只可以返回对象app.service('ZuliaoService', function() {    // 返回一个对象    return {        username: "足疗小妹",        age: 18,        work: function() {            alert('技术棒棒的');        }    };    // 返回字符串无效    // return 'hello H511';})// 使用factory创建的服务可以返回字符串和对象app.factory('ZuliaoFactory', function() {    // 返回对象    return {        username: "洗发小妹",        age: 22,        work: function() {            alert('给凡凡洗的一头懵逼');        }    };    // 返回字符串    return 'hello world';})

3.过滤器(filter)

3.1 系统过滤器

currency:货币numberlimitTolowercaseuppercasedatefilterorderBy

3.2 自定义过滤器

// 1.新建模块var app = angular.module('myApp', []);// 2.创建自定义的过滤器 3999=>3999.00app.filter('formatNumber', function() {    // 返回一个函数，函数的参数是需要过滤的值    return function(i) {        // 保留两位小数点        return i.toFixed(2);    }})

4.路由：引导用户访问指定的页面 = get+请求路径

// 1.新建模块var app = angular.module('myApp', ['ngRoute']);// 2.新建路由:routeProvider:路由提供者app.config(function($routeProvider) {    // 建路由（链式调用）    $routeProvider        .when('/index', {            // 当请求/index路由的时候，template内容被写入到ng-view中            template: '
这是首页
'!        })        .when('/list', {            // 通过ajax从服务器获取，所以必须用localhost访问            templateUrl: 'template/list.html',            // 与list页面匹配的控制器            controller: 'ListController'        })        .when('/content', {            templateUrl: 'template/content.html',            // 与content页面匹配的控制器            controller: 'ContentController'        })        .otherwise({            // 如果请求的路由都不存在，重定向到/index首页            redirectTo: '/index'        })})

常用方法

// 手动监听price和num的变化$scope.$watch('price',function(){})$scope.$watch('num+price',function(){})$scope.$watch('cartlist',function(){},true) 深度监听// 遍历数据angular.forEach($scope.shoplist,function(value,key){})

动画效果

依赖CSS效果

表单验证

表单name名.表单元素name.validvalid invaliddirty pristrineerror.required

核心思想

• MVC
  
  • Model 模型，跟页面数据 ng-model
  • Controller 控制器 控制当前范围内的逻辑操作 ng-controller
  • View 视图，HTML模板内容 HTML标签
• 模块化
• MVVM model-view-viewmodel
• 数据的双向绑定
• 依赖注入