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
相关推荐
Hack Audio:An Introduction to Computer Programming and DSP in Matlab.part1.rar (15 MB, 下载次数: 237 ) Hack Audio:An Introduction to Computer Programming and DSP in Matlab.part2.rar (15 MB, 下载...
Simultaneous Localization and Mapping for Mobile Robots: Introduction and Methods Simultaneous Localization and Mapping for Mobile Robots: Introduction and Methods
《Introduction to Probability and Statistics for Engineers and Scientists》是一本由UC Berkeley著名教授Sheldon M. Ross编写的教材,该书主要面向工程学和科学领域的学生及从业者。本书英文版为读者提供了深入...
1. **极限与连续性**:首先,读者会接触到极限的概念,这是理解微积分基础的起点。极限用于描述函数在接近某一值时的行为,以及定义函数的连续性。连续函数在数学分析中占有重要地位,因为它们保证了微分和积分的...
Introduction to Java Programming and Data Structures, Comprehensive Version, Global Edition,11ed,梁勇教授(Y.Daniel Liang)最新的教材,第11版,全网独家资源。原版高清pdf,可以打印,非扫描版,内含全部...
MIT的Introduction to Computer Science and Programming Using Python 计算机科学及python编程导论课程的的教材,最新版本,是2013年8月份的,绿色封皮那个
1. **Canvas动画**:DEMO可能会展示如何使用JavaScript在Canvas上绘制动画,如粒子效果、游戏场景等。 2. **拖放功能**:HTML 5的拖放API使得用户可以轻松地在网页元素之间移动内容,DEMO可能演示了这一功能。 3. ...
Karl J. Åström, Richard M. Murray - Feedback Systems_ An Introduction for Scientists and Engineers (2008) 反馈系统,控制论学习
3 edition (October 30, 2004) <br>Applying UML and Patterns is the world\'s #1 business and college introduction to \"thinking in objects\"and using that insight in real-world object-oriented ...
Introduction to Python Programming and developing GUI applications with PyQT.pdf 作者B.M. Harwani © 2012 Course Technology, a part of Cengage Learning. ISBN-13: 978-1-4354-6097-3 ISBN-10: 1-4354-6097...
This book explains and helps readers to develop geometric intuition as it relates to differential forms. It includes over 250 figures to aid understanding and enable readers to visualize the concepts ...
The solutions of Introduction to VLSI Circuits and Systems
book, we provide sample syllabi to identify the Knowledge Areas and Knowledge Units. The sample syllabi are for a three semester course sequence and serve as an example for institutional customization...
Introduction to Lie algebras and representation theory (Springer,Third printing, revised, 1980)(T)(186s) - James E. Humphreys.djvu
Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design and the Unified Process, Second Edition
ISO/IEC DIS 15408-1:2020 Introduction and general model.pdf
Introduction to Computing and Programming in Python(4th) 英文无水印pdf 第4版 pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源...
《Introduction to Robotics Mechanics and Control》是由著名机器人学专家John J. Craig编写的经典教材,现在已经更新到了第三版。这本书深入浅出地介绍了机器人学的基础知识,是为本科生和研究生设计的入门读物,...
### Introduction to Python Programming Python is a high-level, interpreted programming language that is widely used for various applications, including web development, data analysis, artificial ...