zoukankan      html  css  js  c++  java
  • Angular

    1.Angular 内容概要   

    简介、主要特性 应用场景 搭建开发环境 Angular的 ng-app、{{ }} Angular的表达式、作用域、控制器 数据双向绑定、模块、事件

    2.Angular 简介

       Angular 是Google提供的一套基于MV*(MVC或MVVM)结构的JavaScript开发工具,它也是一套开源的项目框架。  

       MVC:Model(模型)-View(视图)-Controller(控制器) MVC模式的理解:在Web程序中可以将视图理解为浏览器,服务器端组件为控制器,模型即为业务逻辑模块,视图和控制器都依赖于模型。 MVC的处理过程:首先控制器接收用户的请求,并决定应该调用哪个模型来进行处理,然后模型用业务逻辑来处理用户的请求并返回数据,最后控制器用相应的视图格式化模型返回的数据,并通过表示层呈现给用户。

    3.Angular 特性

      主要特性:指令系统 . 模块系统 . MVC模式 . 依赖注入 . 数据双向绑定。

      核心功能:对现有HTML编码以指令方式进行扩展,并使扩展后的HTML编码可以通过使用元素声明的方式来构建动态内容。

    4.Angular 应用

    应用场景:AngularJS主要考虑的是构建CRUD应用。 (增加Create、查询Retrieve、更新Update、删除Delete)

    幸运的是,至少80%以上的WEB应用都是CRUD应用。  如酷炫的特效,动画,游戏等,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。

    5.Angular 环境

    官网地址:http://angularjs.org/

    <script src=”js/angular-1.2.20.min.js"></script>

    6.Angular 程序

    指令ng-app告诉angularjs它的控制范围。

    使用双大括号{{ }}语法插入动态数据

    Angular 表达式

    使用 表达式 把数据绑定到 HTML; .表达式写在双大括号内:{{ 表达式 }}; .在表达式书写的位置“输出”数据; .AngularJS 表达式 很像 JavaScript 表达式, 它们可以包含文字、运算符和变量; .示例:{{ 5 + 5 }} 或 {{ name + " " + age }}

    Angular 控制器

    控制器 控制AngularJS 应用程序的数据, 是连接视图与数据的桥梁 。 控制器采用ng-controller指令定义,Angular通过控制器构造函数生成实体对象,生成对象的过程中,$scope对象作为参数注入其中,并允许用户访问和操作$scope对象。 控制器操作$scope对象,相当于为其添加属性和方法。

    Angular 模块

    -模块定义了一个应用程序,是应用程序中不同部分的容器; -模块可以提高代码的整洁和重用性,可以按任意顺序加载; -通过 AngularJS 的 angular.module( )函数来创建模块; -模块可在 AngularJS 应用中添加控制器,指令,服务等;

    实例:<div ng-app=“myApp”>......</div> var app = angular.module(“myApp”, []);  应用程序myApp模块对应执行应用的 HTML 元素。

    Angular 事件

    Angular事件指令:

    ng-click/dblclick

    ng-mouseover/out

    ng-keydown/up

    ng-focus/blur

    ng-submit

    更多事件:https://segmentfault.com/a/1190000002634554

  • 相关阅读:
    【JOB】Oracle中JOB的创建方法以及一个细节的探究
    PHP安装加载yaf扩展
    微信开发(1) -- 将本地开发环境映射到公网访问
    修改Nginx与Apache上传文件大小限制
    liunx系统安装composer与配置
    Mysql 5.7 liunx 忘记密码的补救方法
    Vim使用技巧(4) -- 命令行模式 【持续更新】
    Vim使用技巧(3) -- 可视化模式技巧 【持续更新】
    Vim使用技巧(2) -- 插入模式技巧 【持续更新】
    Postman 安装及使用入门教程
  • 原文地址:https://www.cnblogs.com/patriot/p/6052925.html
Copyright © 2011-2022 走看看