Angular介绍1

Angular简介

  • 什么是AngularAngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。 AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护他。 AngularJS的设计初衷是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。 其核心就是通过指令扩展了 HTML,通过表达式绑定数据到 HTML。 Angular不推崇DOM操作,也就是说在Angular中几乎不去使用DOM操作通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:类库和框架。

  • 什么是类库和框架

    • 类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

    • 框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。

  • 为什么不介绍其他的框架和库

    • 公司背景

    • 维护能力

    • 中国企业使用范围

    • 上手难易程度

  • Angular网站

  • 如何下载Angular

  • 官网下载

  • npm: npm install angular

  • bower: bower install angular

  • 如何学习Angular

  • 打开使用 webstorm打开

  • 淘宝购买书籍

  • 多练

Angular使用

  • 先来对比js、jquery、angular同时做一个加法计算器

  • 程序员惯例 Hello World 的Angular版本

表达式

-什么是表达式

  • 表达式的形式有很多种都是通过{{}}包裹起来,最后将运算结果返回出去

    • 字符串 {{string}}

      • 数字 {{number}}

      • 布尔 {{boolean}}

      • 三元表达式 {{?:}}

      • 数组 {{arrary}}

      • 对象 {{object}}

指令

  • 什么是指令指令就是Angular对原有HTML的拓展属性,并且以ng-开头

  • ng-app: 表示Angular程序从这里开始,里面所有与Angular有关的代码将被执行

  • ng-init:初始化参数

  • ng-model:用来将参数绑定到value中

  • ng-bind:相当于innerHTML绑定到标签中

  • ng-click:相当于click事件

Angular特性

  • 指令

  • 双向数据绑定

Angular全局Api使用

  • 数据比较API

    • angular.isArray() 判断给定的对象是否为数组。

      • angular.isDate()判断给定的对象是否为日期类型。

      • angular.isDefined()判断给定的对象是否定义过。

      • angular.isElement()判断给定的对象是否为一个DOM元素。

      • angular.isFunction()判断给定的对象是否为一个函数。

      • angular.isNumber()判断给定的对象是否为数字。

      • angular.isObject()判断给定的对象是否为object类型。

      • angular.isString()判断给定的对象是否为字符串。

      • angular.isUndefined()判断给定的对象是否没有定义过(与angular.isDefined()相反)。

      • angular.equals()判断给定的两个对象是否相等。

  • 其他API使用

    • angular.lowercase() 将字符串转换为小写形式。

      • angular.uppercase()将字符串转换为大写形式。

      • angular.copy()深拷贝一个对象或数组。

      • angular.forEach()遍历对象或数组中的每一个元素并执行一个函数。

  • 什么是类库和框架

    • 类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

      • 框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。

      • 库和框架最大的区别是 1.库中的方法是由开发者调用,框架是由框架本身来调用开发者写好的方法2.使用框架的时候需要对框架有一定认识才能使用

JqLite使用

  • Angular的dom操作

    • 在Angular对于宏观的dom处理非常不错但是对于细小的操作Angular就需要借助内置的JqLite进行操作

    • JqLite分两种情况

      • 有Jquery时,作为Angular检测到Jquery时候会将其引用过来

        • 无Jquery时,作为Angular就会启用自身的JqLite使用,使用方法基本一样

杂项

  • com 商业性质的网站

  • org 非营利性质的网站

  • edu 教育性质

  • cn 中国的网站

angular的特性:

1.双向数据绑定

解决angular闪一闪的问题解决办法

+ 1.把angularjs的引用写在上面(不推荐)
+ 2.添加ng-cloak隐藏代码
+ 3.自己添加 
    [ng-cloak]{
        display:none
    }
	样式
+ 4.通过指令的方式写angular代码,不考虑使用表达式的形式

以后写angular代码的顺序

  • 1.引用angularjs的包

  • 2.创建模块和控制器

    • 3.暴露参数和暴露行为

    • 4.划定angular的管理范围需要配合指令ng-app加模块的名称,ng-controller加控制器的名称

    • 5.将暴露的行为或者参数绑定到对应的位置

angular的执行顺序

  • 1.如果没有模块,在angular内部会帮我们创建模块

  • 2.如果由模块就加载模块中的内容和控制器中的内容

    • 3.将模块中的内容加载到angular中去

    • 4.angular就会去寻找ng-app(可以看作是angular的起点,同时也是angular的管理范围)

    • 5.这时候angular才回去解析ng-app中有关angular的代码

模块和控制器的注意:

  • 1.如果在没有特殊的情况下angular处理模块只会处理第一个,后面的将不会被执行

  • 2.控制器需要放在指定的模块范围内才会进行处理

    • 3.能够有多个控制器

原文地址:https://www.cnblogs.com/bici/p/6056175.html