zoukankan      html  css  js  c++  java
  • Angular JS知识小总结

    1.什么是Angular JS?

    AngularJS 是一个为动态WEB应用设计的 JavaScript结构框架.

    2.Angular JS的用处?

    --它是为了克服HTML在构建应用上的不足而设计;

    --适用于CRUD应用,是为了消除页面上的DOM操作而生.它的核心理念是借鉴了MVC框架,但是它其实更接近于MVVM.viemmodel是一个原生的javascript对象,angularJS把view和model加到viemmodel上,从而实现数据的绑定.而且这种绑定是双向的,即view变化,对应的model也会变化,同样model发生变化也会引起相应的view的变化.

    --主要用来开发单页面应用,它支持浏览器历史操作,向前向后按钮,单页应用中的收藏操作。

    --并不是所有的应用都适合用AngularJS来做,如游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用。

    3.Angular JS的特性

    --双向数据绑定: 这是AngularJS模块的核心功能——**绑定**,ng-model和{{}}实现的是双向绑定,如果controller和ng-model都存在于一个输入框或元素上的话,页面加载完后,对应元素里会显示controller里设置的默认值,一旦在view人工修改,ng-model就会发生作用.controller控制器,可以实现单向绑定.

    --模块化:在AngularJS中,一个模板就是一个HTML文件。AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。

    --服务和依赖注入:AngularJS拥有内建的依赖注入(DI)子系统,DI允许你请求你的依赖,而不是自己找寻它们,即"被动接受",也就是说如果你需要一个对象或者变量,只要angularJS中自有的,只要声明它,就可以使用.

    --指令:Angular JS有很多自有的ng-directives,可以帮助我们操作DOM,另外,我们还可以自定义指令,用angular模块的directive方法.

    4.几个重要的物件

    -- ng-app:一般家在最外层的根元素上,定义了angularJS脚本的作用域;
    -- ng-model:把view上的标签或属性绑定到viemmodel中;
    -- {{}}:angularJS的表达式,作用就是把viewmodel中的model显示到view中.
    --$scope:这个是angularJS的核心对象,即viewmodel对象,这个对象不能更改,依赖注入方式获得.

    5.编写angularJS的基本流程:

     页面
    -- 首先用<script>标签,导入angular.min.js文件;
    -- 一般在根元素<html>里定义angularJS脚本的作用域`<html ng-app="myAPp">`;
    -- 定义控制器的作用域,在标签里`ng-controller="myController"`;
    -- 数据要绑定到viemmodel的话,在对应的标签上用ng-model指令;或者要显示用{{}}.

    js
    -- 加载需要的模块`var myApp = angular.module("myApp",[])`;第二个参数,是该模块所依赖的模块,没有的话,可不填写
    -- myApp.controller("MyController",function($scope){...};控制器方法调用,回调函数的一个参数务必是$scope,这样才能获取到$scope,从而操纵数据.

  • 相关阅读:
    利用if else判断几点是什么时间段
    【UML】活动图介绍
    【UML】类图介绍
    jQuery Ajax跨域问题简易解决方案
    ASP.NET MVC @Html.Label的问题
    Mysql Show ProcessList命令
    【ASP.NET MVC 学习笔记】- 20 ASP.NET Web API
    【ASP.NET MVC 学习笔记】- 19 REST和RESTful Web API
    【ASP.NET MVC 学习笔记】- 18 Bundle(捆绑)
    【ASP.NET MVC 学习笔记】- 17 Model验证
  • 原文地址:https://www.cnblogs.com/sapho/p/4982468.html
Copyright © 2011-2022 走看看