Home > Developer > Web Develop
Next a series of articles are learning https://docs.angularjs.org/tutorial notes, the main study of the implementation of the Angular-phonecat project, to introduce the use of Angularjs.
1. Download Angular-phonecatUsing Git clone phonecat:
git clone--depth= https://github.com/angular/angular-phonecat.git
--depth=14 can be removed, here is the latest 14 commit.
The --depth=14 option just tells Git-to-pull is down by the last commits. This makes the download much smaller and faster.
Bower -client-side code Package ManagerHttp-server -Simple local static web Ser Ver- unit Test Runnerprotractor2 end Test Runner
Nodejs,npm,karma installation can refer to the previous article: Angularjs Learning---ubuntu12.04 common problems in the installation configuration of Karma
1). The Install Bower command in Ubuntu is:2). Install the driver:sudo Install -G bower
NPM Run Update-webdriver
It looks like the selenium driver is installed here.
3). Start the project: NPM Start[Email protected]:~/develop/angular-phonecat$ npm start > [Email protected]0.0.0prestart/home/amosli/develop/angular-Phonecat> NPMInstall> [Email protected]0.0.0postinstall/home/amosli/develop/angular-Phonecat> BowerInstall> [Email protected]0.0.0start/home/amosli/develop/angular-Phonecat> http-server-p8000starting up HTTP-server, serving./on port:8000Hit CTRL-C to stop the server4). End-to-end testing:
NPM Run Protractor
The automated test step is to open the Chrome browser, connect to the app here is angular-phonecat----> perform all end-to-end testing----> report the test results on the command line----> close the browser and exit.
3.phonecat Project Tutorial OverviewThe tutorial is divided into 13 steps, each step can be switched to the corresponding branch directly to run its steps, such as to learn the No. 0 step of the content, then execute the following command:
git checkout step-0 Previous HEAD position was b1e657a ... step-4 phone orderinghead is now at C5495A2 ... step-0 Bootstrap Angular App
Similarly, the steps you can see for switching are step-0 to 12.
4.phonecat project step-01). Switch to step No. 0 to start the project:2). In the browser input http://localhost:8000/app/index.htmlgit checkout step-0 Previous HEAD position was b1e657a ... step-4 phone orderinghead is now at C5495A2 ... step-0 Bootstrap angular app[email protected]-pc:~/develop/angular-phonecat$ npm start
Effect:
Source Code of Index.html
<!DOCTYPE HTML><HTMLLang= "en"Ng-app><Head> <MetaCharSet= "Utf-8"> <title>My HTML File</title> <Linkrel= "stylesheet"href=".. /bower_components/bootstrap/dist/css/bootstrap.css "> <Linkrel= "stylesheet"href= "Css/app.css"> <Scriptsrc=".. /bower_components/angular/angular.js "></Script></Head><Body> <P>Nothing here {{' yet ' + '! '}}</P></Body></HTML>
The order in which the data is rendered:
Injector that'll be used to dependency injection is created.
The injector would then create the root scope that would become the context for the model of our application.
Angular "Compile" the DOM starting ngApp at the root element, processing any directives and bindings found along The.
Please edit the app/index.html file, add the following code to the Index.html file, and then run the app to see the effect.
<ul> <Li> <span>Nexus S</span> <P>Fast just got faster with Nexus S. </P> </Li> <Li> <span>Motorola XOOM? With Wi-Fi</span> <P>the next, next Generation tablet. </P>li></ul>
Effect:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
