今天主要跟大家详细讲解一下angularjs的三大模块： modal，controller，view。 首先跟大家说一下这三个模块之间的关系。 1.数据模型（modal）主要提供数据。它不会和视图（view）直接操作。 2.controller保存modal提供的数据，与视图进行操作。 3.view是视图，也就是页面展示。 4.总而言之，controller负责数据和视图之间的通信，就是两者的接口人。他们分工明确，实现了模块化。 一.如何使用数据模型（modal）？讲到数据模型，我们...
今天的主要讲解部分有以下几点：1.演示一个完整的项目结构 2.$scope的含义 3.模块化和依赖注入。 一.演示一个完整的项目结构。 下面的所有这些代码，都是转载于@大漠穷秋 老师的。我转载来之后放到了github上，大家可以去这个链接看源代码。一边看，一边学习，效果最好了～～～～下面我们来看这个截图，这就是一个完整的angularjs项目应该有的目录结构。下面我来讲解每一个文件夹对应的分别是什么含义。1.css：不用说了，就是放一些...
一.angularjs简介AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用 数据绑定 和 依赖注入，它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现，这也使得它能够完美地和任何服务器端技术结合。 说了这么多，估计你啥都没有理解。。。对吗？别着急，我来说说他的几个特点吧：模块化，数据双向绑定...
这次我们来详细讲解angular的双向数据绑定。 一.简单的例子这个例子我们在第一节已经展示过了，要看的移步这里这里实现的效果就是，在输入框输入内容，下面也会相应的改变对应的内容。这就实现了数据双向绑定。 二.取值表达式与ng-bind的使用我们再看一个例子，点击这里，文中出现的第一个例子中，{{greeting.text}}和{{text}}就是一个取值表达式了，但是如果你一直刷新页面，你会发现这样一个问题，那就是页面有时候会一瞬间的出现...
主从组件继学习笔记6，现在可以在页面上显示一个数组，但是原则上不能将所有特性放在同一个组件中，因为如果将所有特性放在同一个组件中，当特性特别多时，组件就变得不好维护了。所以要将大型组件拆分为多个小型组件，使每一个小型组件集中处理某一个特性任务或者工作流，而且这样也便于维护。 这次要将学习笔记6中的查看hero详情，放置在一个新的，独立，可复用的组件中，集中在新的组件管理和维护hero详情的信息。 1.创建一个新...
序言： Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用 实例讲解 运行结果如下。 设置了3个导航栏， Home、 About、Dashboard。 点击不同的导航栏，跳转到相应的页面：创建3个 component ng g c homeng g c aboutng g c dashboard路由与配置 （1）**引入 Angular Router ** 当用到 Angular Router 时，需要引入 RouterModule，如下： // app.module.ts import { RouterModule } from @ang...
简介使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1>使用方括号将HTML标签的一个属性值绑定到一个表达式上 <img [src]="imgUrl" alt="">使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上 <button (click)="onClickButton($event)">按钮绑定事件</button> 注意在开始下面的例子之前，请先确认已经新建了一个工程。如果没有，请查看：Angular2学习笔记之A...
简介基本HTML属性 <td [attr.colspan]="tableColspan"></td>Css 类绑定 <!-- 第一种情况 class 类全部替换 --> <div [class]="divClass">CSS 类绑定，[class] 全部替换的例子</div><!-- 第二种情况 替换 class 类的部分属性 --> <div [class.a]="isSpcial">CSS 类绑定，[class.sepcial] 部分替换的例子</div><!-- 第三种情况 根据表达式显示部分 class 属性--> <div [ngClass]="{a:isA, b:isB}">CSS 类绑定，[ngClass] 替换多个的...
根模块 (root module) 每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为 AppModule。 示例 src/app/app.module.ts import { NgModule } from @angular/core; import { BrowserModule } from @angular/platform-browser; import { AppComponent } from ./app.component;@NgModule({imports: [ BrowserModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ] }) export class AppModule { }impo...
写在前面的废话1 我用angular的时候还是1.x，属于代码写的很反人类但是angular2还没出的蛮荒年代。我本身是从j2ee转到Android的工程师，也是就是说，我的日常开发语言是Java。突然切换到JavaScript那真是难受的像北极熊同企鹅讲话，更何况后来嫌webstorm太卡而用起了没有提示的sublime（嗯，终于治好了多年顽疾的“从不记函数名症候群”）。经过了一段痛苦不堪的撞墙经历后，总算是开始习惯了。 但我还是想大吼一声，JavaScriptWCN...
本文介绍了Angular4学习笔记之实现绑定和分包，分享给大家，希望对大家有帮助 src目录下的app/app.component.ts文件是一个标准的angular4组件的结构。上面@component()括号内template属性里用`(这个符号不是单引号，而是键盘1左边、tab键上面的那个符号)包裹的是View，下面export的class部分是Controller。 希望实现的效果长这个样子： 万里长征第一步，先从修改View开始。 修改temlate里的HTML文件，改成下面的样子： <h1>Hello,W...
Angular4我自己还在摸索学习中，这个系列中的笔记会不定期修改和更新…… 一、安装nodejs（下面方式 二选一，个人推荐第二种） 1、nodejs官网下载安装 2、使用nvm安装管理（具体方式参照我的另一篇） 二、全局安装angular-cli npm install -g @angular/cli三、进入一个存放项目的文件夹，运行以下代码，初始化项目 ng new <项目名>四、启动项目 cd <项目名> npm install ng serve附： 1.引入jQuery和bootstrap a.安装jquery和boot...
本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考，具体如下： 一、执行基本的表单验证 <!DOCTYPE html> <html ng-app=exampleApp><head><meta charset="UTF-8"><title>表单</title><script src="../../js/angular.min.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="e...
上一篇从整体上认识了Angular，从现在开始更加深入的学习Angular的特性。本次学习的是数据绑定。应该所有的MVC框架都会用到数据绑定，比如我所知道的ThinkPHP、struts等，只有实现了数据绑定才能将模型层和视图层分离，实现MVC。Angular的数据绑定比较特别，它支持双向数据绑定。 1、ng-bind <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head><meta charset="UTF-8"><title>databinding1</title> </head> <body><h1 ng-cont...
本文给大家分享angular.js学习笔记之自定义指令实例代码讲解，具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script> </head> <body ng-app="angularJS" > <!-- <div class="self-direct">{{title}}<input type="text" ng-model=title></div> --> <!-- <input type="text" ng-model="...