`
sillycat
  • 浏览: 2551388 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

AngularJS(1)Introduction and Follow PhoneCat Demo

    博客分类：
  • UI
 
阅读更多

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


分享到：
| GCM(5)Working with MAVEN and Android OS ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics