MyException - 我的异常网
当前位置:我的异常网» JavaScript » AngularJS(一)Introduction and Follow PhoneCat De

AngularJS(一)Introduction and Follow PhoneCat Demo

www.MyException.Cn  网友分享于:2014-01-25  浏览:14次
AngularJS(1)Introduction and Follow PhoneCat Demo

AngularJS(1)Introduction and Follow PhoneCat Demo

1. Build and Prepare
I can get the resource from here
>git clone https://github.com/angular/angular.js.git
>cd angular.js
>npm install
This will install all the packages we need.

I may already have grunt-cli
>sudo npm install -g grunt-cli

Build the Angular
>grunt package

Start the web Server
>grunt webserver
Visit http://localhost:8000 to verify.

The Unit Test Suite is written with Jasmine and executed with Karma
>grunt test:unit

Specify the browsers
>grunt test:unit --browsers Opera,Firefox 

Run the command 
>grunt autotest:jqlite

Just modify the source, the auto test will happen itself.

And for more information
>grunt --help

Running the end-to-end Test Suite
>grunt webserver
>grunt test:end2end
or
>grunt test:e2e
or
Visit http://localhost:8000/build/docs/docs-scenario.html

2. First Step of Angular
First Example
<!doctype html> <html ng-app>  <head>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>  </head>  <body>    <div> <label>Name:</label>        <input type="text" ng-model="name" placeholder="Enter a name here"> <hr>        <h1>Hello {{name}}!</h1>    </div>  </body> </html>

ng-app, ng-model, {{ }}

Introduction of Bower
>node -v
v0.10.22

>npm -v
1.3.23

Update the NPM
>sudo npm update npm -g

Update the NodeJS
Find the package here and install it http://nodejs.org/download/

node  v0.10.22
npm   1.3.23

Start the example from here
https://github.com/daliworks/angular-require-bootstrap-seed

Install bower
>sudo npm install bower -g
>bower -v
1.2.8

>bower help

Check the package List
>bower list

Install the package I need.
>bower install

Start the Server and begin the debugging
>grunt server

Deployment
>grunt build

Error Message:
INFO [karma]: Karma server started at http://localhost:9876/INFO [launcher]: Starting browser ChromeCanary ERROR [launcher]: Cannot start ChromeCanary Can not find the binary /Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary Please set env variable CHROME_CANARY_BIN Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings

Solution:
https://github.com/karma-runner/karma/blob/master/docs/config/03-browsers.md
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

I can set the CHROME_CANARY_BIN after I install chrome canary version, but I can also go to the karma configuration file and change the browser to my chrome version.
> vi karma.conf.js

Download and install Chrome Canary
https://www.google.com/intl/en/chrome/browser/canary.html

That is great, I will begin to create my own angular example project.

3. My Own Example of Angular
…soon...

4. Start from AngularJS tutorial angular-phonecat.git
>git clone https://github.com/angular/angular-phonecat.git

>cd angular-phonecat
>node —version
>npm install

>./scripts/web-server.js
Then visit the URL http://localhost:8000/app/index.html

Bootstrapping
ng-app directive, this is the root element of our application. This gives application developers the freedom to tell angular if the entire html page or only a portion of it should be treated as the Angular application.

Import the CSS and JS lib, {{ ‘yet’ + ‘!’ }}, {{}} means an expression.

Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse click, key press or incoming HTTP response) that might change the model. Once such an event occurs, Angular detects if it caused any model changes and reflect them in the view by updating all of the affected bindings.

Static Template
The full diff from step0 to step1 is here.
https://github.com/angular/angular-phonecat/compare/step-0...step-1

body{
     padding-top: 20px;
}

Just use static HTML as our angular template.

Angular Templates
http://code.angularjs.org/1.2.8/docs/api

View is a projection of the model through the HTML template.

View and Template
<li ng-repeat=“phone in phones”>
…snip…
</li>

We add ng-controller to attach the PhoneListCtrl controller to the DOM(Document Object Model).

The curly braces around phone.name denote bindings.

Model and Controller
We have a AngularJS module named phonecatApp, we declare a controller named PhoneListCtrl in phonecatApp module.

The controller plays a crucial role. Write tests for controllers.

Tests
All the tests are written by Jasmine, and they are running with karma.
Running the tests with this command.
>./scripts/test.sh
INFO [karma]: Karma v0.10.9 server started at http://localhost:9876/INFO [launcher]: Starting browser Chrome INFO [Chrome 32.0.1700 (Mac OS X 10.9.1)]: Connected on socket UH8OjsQWYgEhjRfBZx0_
Chrome 32.0.1700 (Mac OS X 10.9.1): Executed 1 of 1 SUCCESS (0.319 secs / 0.03 secs)


References:
Angular Document
http://dongderu.net/post/2012-10-19-angularjs-introduction
http://angularjs.org/
http://zouyesheng.com/angular.html
http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

Angular Seed
https://github.com/angular/angular-seed
https://github.com/tnajdek/angular-requirejs-seed
https://github.com/maxdow/angularjs-requirejs-seed

Angular Testing
http://entwicklertagebuch.com/blog/2013/01/angularjs-app-mit-requirejs-und-testacular-testen/
https://github.com/jhiemer/angularjs-requirejs-testacular

Angular Startup
https://github.com/angular/angular.js
http://docs.angularjs.org/misc/contribute
http://docs.angularjs.org/misc/started

bower
http://blog.fens.me/nodejs-bower-intro/

Sample
https://github.com/daliworks/angular-require-bootstrap-seed

Angular Tutorial
http://code.angularjs.org/1.2.8/docs/tutorial/step_01

Angular API document
http://code.angularjs.org/1.2.8/docs/api


文章评论

程序员必看的十大电影
程序员必看的十大电影
10个调试和排错的小建议
10个调试和排错的小建议
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
鲜为人知的编程真相
鲜为人知的编程真相
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
代码女神横空出世
代码女神横空出世
一个程序员的时间管理
一个程序员的时间管理
那些争议最大的编程观点
那些争议最大的编程观点
中美印日四国程序员比较
中美印日四国程序员比较
为什么程序员都是夜猫子
为什么程序员都是夜猫子
如何成为一名黑客
如何成为一名黑客
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
每天工作4小时的程序员
每天工作4小时的程序员
程序员都该阅读的书
程序员都该阅读的书
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
程序员和编码员之间的区别
程序员和编码员之间的区别
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
我的丈夫是个程序员
我的丈夫是个程序员
我是如何打败拖延症的
我是如何打败拖延症的
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
老程序员的下场
老程序员的下场
总结2014中国互联网十大段子
总结2014中国互联网十大段子
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
Java程序员必看电影
Java程序员必看电影
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
漫画:程序员的工作
漫画:程序员的工作
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
编程语言是女人
编程语言是女人
 程序员的样子
程序员的样子
程序员的鄙视链
程序员的鄙视链
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员应该关注的一些事儿
程序员应该关注的一些事儿
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有