1.设计原则

1.YAGNI  不要把未来需求引入当前工程   2.KISS  keep it simple and stupid  语义化标记 合理注释 符合规定的命名

3.DRY（don‘t repeat youself） 不写重复代码 善于封装  

4.高内聚低耦合 

    内聚： 一个组件内部，不同部分之间关系  耦合不同组件之间的关系

    耦合：不同组件之间的关系

5.SRP  单一责任原则，一个模块实现单一的规则

6.OCP 开闭原则

7.LCP原则 最少知识法则

2.设计模式

分为：创建型  结构型 行为行 

单例模型  工厂模式   其他的自行百度    

MVC  model 模型数据（变量）  View 视图（html css）  Control 控制器（js方法等）

适合数据操作比较频繁的应用程序，数据双向绑定，依赖注入，模块化设计  ng 开源的js框架

3.语法

{{表达式}}  在当前位置输出当前表达式的结果 ，需要ng-app

常用指令：

1.ng-app：指定作用范围 载入

2. ng-init初始化变量  

 3.ng-bind 指令中表达式值输出当前元素的innerHTML中

4.ng-repeat：遍历数组，对象—> 实质上遍历对象实际是结果 如果遍历是重复数组 加上遍历方式eg:

数组:ng-repeat="m in cas track by $index"
对象:ng-repeat="(key,value) in cas"(得到key和value)
<p ng-init="student={name:'liuyifei',bra:'D'}"></p>

<span ng-repeat="key in student" ng-bind="key"></span>

结果:liuyifeiD

5.ng-if 判断  是否在dom中显示还是移除

6.ng-show  是否显示  7.ng-Checked 8.ng-Style 9.ng-Disabled…..

<ANY ng-if=”表达式”> </ANY>

4.模块mvc

声明：angular.module（“mok”,[依赖列表]）

注册：ng-app=“名字”

声明控制器：app.controller（”控制器名字“，方法func）

使用控制器：<ANY ng-controller =”控制器名称”> </ANY>

操作模型数据：$scope定义模型数据 建立了模型数据和视图的桥梁

<!DOCTYPE html>

<html ng-app="myapp" lang="en"><!--模块注册调用-->

<head>

    <meta charset="UTF-8">

    <title>MVCdemo</title>

    <script src="js/angular.js"></script>

</head>

<body>

<!--使用控制器 作用域仅限于标签内 V-->

<p ng-controller="myCtrl">{{name}}</p>

<script>

    var app = angular.module("myapp", ['ng']);//模块申明

    app.controller('myCtrl', function ($scope) {  //控制器申明 C

        console.log('in myCtrl function');

        $scope.name = "zheng" ;   //模型数据 M

    })

</script>

</body>

</html>

5.一个添加删除的demo

<!DOCTYPE html>

<html lang="en" ng-app="app-module">

<head>

    <meta charset="UTF-8">

    <title>gouwuche </title>

    <script src="js/angular.js"></script>

</head>

<body ng-controller="ctr">

单价：<input type="text" id="v1">

数量：<input type="text" id="v2">

<button ng-click="add()">添加</button>

<table >

    <thead>

        <tr>

            <th>单价</th>

            <th>数量</th>

            <th>小计</th>

            <th>删除</th>

        </tr>

    </thead>

    <tbody>

        <tr ng-repeat="(key,row) in data">

            <td >{{row.sprice}}</td>

            <td >{{row.num}}</td>

            <td >{{row.sprice*row.num}}</td>

            <td ><button ng-click="ndelete(key)"  target1="key">删除</button></td>

        </tr>

    </tbody>

</table>

<script>

    var app=angular.module("app-module",['ng']);

    app.controller("ctr",function ($scope) {

        $scope.data=[{sprice:3,num:20},{sprice:4,num:20},{sprice:5,num:20},{sprice:6,num:20}];

        $scope.add=function () {

            $scope.data.push({sprice:v1.value,num:v2.value});

            console.log($scope.a);

            console.log($scope.b);

        };

        $scope.ndelete=function (key) {

           $scope.data.splice(key,1);

        };

    });

</script>

</body>

</html>

Angular（1）的更多相关文章

  1. Angular（03）-- lint风格规范和WebStorm小技巧

    在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...

  2. Angular（02）-- Angular-CLI命令

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  3. Angular（01）-- 架构概览

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  4. 从flask视角学习angular（一）整体对比

    写在前面 前端框架完全不懂. 看着angular中文官网的英雄编辑器教程和核心知识,用偷懒的类比法,从flask django的角度 记录一下自己对angular的理解. 作为工科的武曲,自己的体会是 ...

  5. Angular（三）

    Angular开发者指南(三)数据绑定   数据绑定AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源 ...

  6. Angular（二）

    Angular开发者指南(二)概念概述   template(模板):带有附加标记的模板HTMLdirectives(指令):使用自定义属性和元素扩展HTMLmodel(模型):用户在视图中显示的数据 ...

  7. Angular（一）

    Angular开发者指南(一)入门介绍   什么是AngularAngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程 ...

  8. angular（3）服务 --注入---自定义模块--单页面应用

    ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...

  9. Angular（2）

    1.自定义指令,直接栗子: note:定义指定是驼峰,2部分 前缀+作用,but  调用 改驼峰首字母大写处为 (-首字母小写) <!DOCTYPE html><html lang= ...

随机推荐

  1. C# 跨线程调用控件

    在C# 的应用程序开发中, 我们经常要把UI线程和工作线程分开,防止界面停止响应.  同时我们又需要在工作线程中更新UI界面上的控件, 下面介绍几种常用的方法 阅读目录 线程间操作无效 第一种办法:禁 ...

  2. Python基础教程-第一章-变量、函数、字符串

    1.1变量 变量基本上就是代表(或者引用)某个值的名字,举例来说,如果希望用x代表3,只需要执行下面的语句即可: >>>x = 3 这样的操作称为赋值(assignment),值3赋 ...

  3. Java中的异常处理

    描述: 如果Java中的函数有可能抛出异常,则该异常要么被catch住,要么在声明函数时必须声明该函数体会throws exception. 处理的时候的流程是,当发生异常时,首先结束当前函数后续语句 ...

  4. mssql 修改文件逻辑名称

    --查看文件逻辑名SELECT name FROM sys.database_files ALTER DATABASE [本身数据库名称]MODIFY FILE ( NAME = [原错误数据库名称] ...

  5. OC基础--类

    都是注释哈 类的组成: C语言中函数分为声明和实现 OC中定义一个类也分为声明和实现, 也就是说以后我们在OC中定义类, 就是在写类的声明和实现 编写类的声明和实现: 声明 .h: /*  行为方法: ...

  6. Setup Spark source code environment

    1. Install Java and set JAVA_HOME 2. Install Eclipse Juno Java IDE, Scala plugin and Scala Test 3. D ...

  7. SharePoint 2013 开发——其他社交功能

    博客地址:http://blog.csdn.net/FoxDave 上一篇讲了如何获取用户配置文件的相关属性,它属于SharePoint 2013社交功能的一个小的构成部分.社交功能是SharePoi ...

  8. Python开发入门与实战3-Django动态页面

    3.Django动态页面 上一章节我们实现的helloworld视图是用来演示Django网页是创建的,它不是一个动态网页,每次运行/helloworld/,我们都将看到相同的内容,它类似一个静态HT ...

  9. response下载文件 （转载）

    核心代码: ? DataSet ds = dBll.GetList("ID=" + ID); ? string docName = "a.doc";//文件名, ...

  10. SQL Server 2005 控制用户权限访问表

    转自:http://www.cnblogs.com/gaizai/archive/2011/07/14/2106617.html 一.需求 在管理数据库过程中,我们经常需要控制某个用户访问数据库的权限 ...