Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend HTML with custom attributes and elements (给HTML增加自定义属性和元素) Model(模型): the data shown to the user in the view and with which the user interacts (与用户交互…

Angular程序架构 Angular程序架构 组件:一段带有业务逻辑和数据的Html服务:用来封装可重用的业务逻辑指令:允许你向Html元素添加自定义行为模块: 环境搭建 安装nodeJs安装好nodeJs后,在cmd中我们将可以使用npm(nodeJs 的包管理工具 ) 查看nodeJs版本 1 npm -v 安装angular cli命令行工具 1 npm install -g @angular/cli 查看angular cli 版本 1 ng -v 创建auction项目 12 ng…

(这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时研究一下为什么我们要以那样的方式去使用它们.我们从Service开始. SERVICES(服…

AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时…

AngularJS:何时应该使用Directive.Controller.Service? 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时研究一下为什么我们要以那样的方式去使用它们.我们从…

翻译:大漠穷秋 原文链接:http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/ 一.简述 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉. 这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时研究一下为什么我们要…

AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时研究一下为什么我们要以那样的方式去使用它们.我们从Service开始. SERVICES(服务) 如果你已经使用过AngularJS,你可能已经遇到过Ser…

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈 更详细的说明: 模型(Mod…

一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系…

module(模块) 作用 通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块. 将重复使用的指令或者过滤器之类的代码做成模块,方便复用 注意必须指定第二个参数,否则变成找到已经定义的模块 请参照资料-备课代码-20-module.html理解 语法 语法: angular.module('模块名',[]) 第二个参数是个数组,这个数组里的每一个元素,是我们当前模块依赖的其他模块 注意: 即便我们不依赖其他的模块,也需要传递一个空数组 因为如是不传第二个参数的话,这个方法的作用就会变为…

什么是变化检测? 变化检测的基本功能就是获取应用程序的内部状态(state),并且是将这种状态对用户界面保持可见.状态可以是javascript中的任何的数据结构,比如对象,数组,(数字,布尔,字符串等基础数据类型).这种状态最终可能成为用户界面中的段落,表单,链接或按钮,在web浏览器中我们们称之为文档对象模型(dom).将数据结构作为输入生成dom作为输出并展示给用户,我们称这个过程为渲染. 但是,在运行时发生更改时会变得更加棘手.一段时间后,DOM已经被渲染.我们如何弄清楚模型中发生了哪些…

一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开发和维护这个库 - 有了这一类框架就可以轻松构建 SPA 应用程序 - 轻松构建 SPA(单一页面应用程序) - 单一页面应用程序: + 只有一个页面(整个应用的一个载体) + 内容全部是由AJAX方式呈现出啦的 - 其核心就是通过指令扩展了 HTML,通过…

AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的指令. AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记! 应用程序逻辑(Logic)和行为(Behavior) 应用程序逻辑和行为是您用JavaScript定义的控制器.AngularJS与标准AJAX应用程序不同,您不需要另外编写侦…

一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成的 API 与视图进行交互,每个组件都能独立完成各自的功能. 我们可以通过一张图来理解一下组件: 组件要素:JavaScript.HTML.CSS 创建 Angular 组件的方法有三步: ① 从 @angular/core 中引入 Component 修饰器 ② 建立一个普通的类,并用 @Comp…

template(模板):带有附加标记的模板HTML directives(指令):使用自定义属性和元素扩展HTML model(模型):用户在视图中显示的数据,并与用户进行交互 scope(作用域):存储模型的上下文,以便控制器,指令和表达式可以访问它 expressions(表达式):访问范围中的变量和函数 compiler(编译器):解析模板并实例化指令和表达式 filter(过滤器):格式化表达式的值以显示给用户 view(视图):用户看到的内容(DOM) Data Binding(数据…

Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal } 使用过滤器:{{ e.salary  | 过滤器名 }} Angular2.x中,过滤器更名为  “管道(Pipe)” 自定义管道的步骤: 1.创建管道class,实现转换功能 @Pipe({ name:'sex' }) export class SexPipe{ transform(val){…

一.集成开发环境@angular/cli IE8之后才有debugger工具 2009,nodejs发布,前端Big Bang 1.1 基于NodeJS的工具链 打包工具 grunt 对js代码做合并.压缩.混淆 gulp grunt的改进版 webpck 打包工具,静态模块打包器,一个标准 自动化测试工具 karma jasmine CSS预编译 Material Design 中文 质感设计 每一段时间,都有一种风格 苹果 倡导 扁平化,极简化 Google 倡导 Material Desi…

首先引入 angular 的根作用域:$rootScope ng-app:定义了angualr的作用域 ng-controller:定义了控制器 $scope定义了视图与控制器之间的纽带,而scope本身是垂直继承的,当子作用域没有定义,便会找父作用域,逐层往上找直到根作用域 $rootScope. 没有定义控制器的元素对应的即是根作用域,如下(<div>{{msg}}</div>) 看下面代码,当我们点击parent控制器时,发现其子控制器内容会跟着变化,而父控制器以及根作用域绑…

自定义指令 指令增强了 HTML,提供额外的功能 内置的指令基本上已经可以满足我们的绝大多数需要了 少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现 普通指令 语法 <div hello-world></div> <hello-world></hello-world> angular.module('myModule', []) .controller('HelloController', ['$scope', function($scope)…

好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $rootScope 和 $scope: $rootScope是angular中最接近全局作用域的对象,是所有$scope对象的最上层! $scope对象就是一个普通的js对象,我们可以在其上随意修改和添加属性,并且其在angular中充当数据模型,它是所有属性都可以自动呗视图访问到,但是它并不负责数据的处理…

一些符号的概念 #nzTable 模块变量 [] 输入(绑定值) () 输出(绑定事件) 补充说明: []是控件监控外部变化 ()是监听事件,交给外部变化内部值的权利 二者都是"监听",非一次性 [name]="a",a发生变化,name一直跟着改变,但是name发生变化,a不改变 总之[]写在哪个组件,哪个组件就被动接受值;()写在哪个组件,就是监听哪个组件的值变化 [()] 输入输出 nzShowExpand是ng-zorro的指令,"指令"…

在开讲之前,首先谈谈APP应用.平时我们用的app总是多页面,如果用原生安卓或者苹果,那当然很流畅啦.但是当我们用一般的html页面做移动端,简单时候我们可以用<a href=""></a>这样的标签去链接页面时,速度还是可以的. 但是当我们的应用越来越多时,切换起来没那么流畅.又是碍于网速,页面加载进来有点慢.但是在angular里面,我们可以用路由进行切换.因为在angular里面,我们用户一般在加载这样的应用时,会整个的缓存在手机上.我们用路由进行切换时,…

service的注入, 注入的是service的单一实例…

近些年前端框架非常多,主流的有 Vue.React.Angular 等.我参与的项目中使用较多的是 Vue.因为 Vue 学习难度不大,上手很快,代码简洁,而且使用 Vue 全家桶(Vue + Vue-Router + Axios + Vuex + Vue-Bus等).再配合 Element UI 等第三方UI组件库进行开发也是不错的选择.Vue 的作者是华人,故文档等各方面资料也非常齐全. 但个人体会:如果前端项目庞大,在工程化方面,Angular 是最佳选择,最贴近 Java 后端开发的思想…

本文整理自Dan Wahlin在ng-conf上的talk.原视频地址: https://www.youtube.com/watch?v=e3djIqAGqZo 开场白 开场白主要分为三部分: 感谢了ng-conf的组织者. 阐述了TypeScript是JavaScript的超集,并不是另外一种语言. 引用了他的两个朋友最喜欢的TypeScript特性. 由于开场白内容不太重要,所以不再详述.下面开始讲解Dan Wahlin最喜欢的TypeScript的特性. 类型支持(Type Support…

双向绑定是Angular的核心概念之一,它给我们带来了思维方式的转变:不再是DOM驱动,而是以Model为核心,在View中写上声明式标签.然后,Angular就会在后台默默的同步View的变化到Model,并将Model的变化更新到View. 双向绑定带来了很大的好处,但是它需要在后台保持一只“眼睛”,随时观察所有绑定值的改变,这就是Angular 1.x中“性能杀手”的“脏检查机制”($digest).可以推论:如果有太多“眼睛”,就会产生性能问题.在讨论优化Angular的性能之前,笔者希…

之前写过一篇backbone view之间的传递,由于现在在用angular搞开发,现在也来总结一下.在angular 传递数据通俗的讲叫做 广播 ,在一些文章中,也叫做事件的发布与订阅,在angular中通过 发布与订阅制定了数据的传递,使用时,在出发点广播事件,这个事件后面的参数是传递的数据,在适当的位置去进行接收,具体到开发中,对应着$scope和$rootScope的$emit.$broadcast和$on方法.首先了解一下概念: 1.$scope与$scope之间的关系,$scope与…

1.服务(Service)介绍 Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app. Angular服务的两大特点: Lazily instantiated – Angular only instantiates a ser…

简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC的特性增强了代码的结构和可维护性,应对需求的变化做出最小的改动 为什么使用AngularJS 更少的代码实现更强劲的功能 提供了很多在传统后端开发中大量使用的思想和方式,提高前台代码的结构和可维护性 使用AnuglarJS的流程 在HTML中引入Angular.js文件 在自己的代码中定义一个Ang…

angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body ng-app="myApp"> <a href="" ui-sref="lol"&g…