AngularJS基础知识

最新推荐文章于 2018-10-14 11:03:00 发布

原创最新推荐文章于 2018-10-14 11:03:00 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

本文为艾夏SEO博主原创文章，未经博主允许不得转载。

文章标签：

#angularjs

Angularjs 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍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){})