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:货币
number
limitTo
lowercase
uppercase
date
filter
orderBy

3.2 自定义过滤器

// 1.新建模块
var app = angular.module('myApp', []);

// 2.创建自定义的过滤器 3999=>3999.00
app.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.$valid$valid $invalid$dirty $pristrine$error.required

核心思想

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