zoukankan      html  css  js  c++  java
  • 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.能够有多个控制器

  • 相关阅读:
    Jsp自学2
    Jsp自学1
    .NET资源泄露与处理方案
    版本控制简介和工具
    中文操作
    获取windows操作系统所有用户
    .NET单例模式快速学习应用
    .NET多线程知识快速学习
    安装&卸载Windows服务
    扫雷小游戏-纯网页版
  • 原文地址:https://www.cnblogs.com/bici/p/6056175.html
Copyright © 2011-2022 走看看