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#获取天气预报信息(baidu api)包括pm2.5

    /// <summary> /// 获取天气预报信息 /// </summary> /// <returns></returns> public Bai ...

  2. iOS开发UI篇—UITableview控件基本使用

    iOS开发UI篇—UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) #import <Foundation/Foundation.h> ...

  3. require.js的使用

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...

  4. HDU 4898 The Revenge of the Princess’ Knight ( 2014 Multi-University Training Contest 4 )

    题意:给定一个环形字符串,让他把它分成k份,使得最大的字典序 最小. 思路:二分答案,首先很明显答案所有可能是 n*n种  排序可以先求出最长公共前缀,这样比较就只需要比较公共前缀的下一位就能比较出两 ...

  5. 常用排序算法的Java实现 - 1

    学习编程语言时, 我们会接触到许多排序算法, 这里总结了一下常见的排序算法. 不定期更新. * 其实在Java中存在如Collections.sort()这样的方法来自动为我们排序, 不过学习排序算法 ...

  6. bcopy函数

    函数原型:void bcopy(const  void  *src,  void  *dest,  int  n) 头文件:#include <string.h> 函数功能:将src指针指 ...

  7. phonegap 框架详解

    首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图. 说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求,  当 ...

  8. tar.gz file installation

    1. tar xzvf  filename.tar.gz 2. cd filename 3. ./configure ./configure --prefix="path" 4. ...

  9. javaweb---html标签

    img标签

  10. OpenCV是什么?

    OpenCV其实就是一对C和C++语言的源代码文件,这些源代码文件中实现了许多常用的计算机视觉算法.例如C借口函数cvCanny()实现了Canny边缘提取算法.可以直接将这些源代码添加到我们自己的项 ...