In this section of the tutorial, you will gradually become familiar with the most important source code files for the Angularjs phonecat app. You will also learn how to bind the development server with Angular-seed and run the app in the browser.
Before you continue, make sure that you have set up your development environment and installed all the necessary dependencies, as described here.
Under the angular-phonecat directory, run this command:
Git checkout-f step-0
This will allow you to reset your workspace's tutorial app to step 0. (Note: It is highly recommended to use Sourcetree to monitor code changes for each step, and the command line God ignores this sentence.) )
You must repeat this instruction in each step of the future and point the steps to your steps, and doing so will cause any changes you make in the workspace to be lost.
If you have not finished, you need to install all dependencies by running this command:
NPM Install
To see the app running in the browser, open a separate terminal and run npm start to start the Web server, now open the browser and accesshttp://localhost:8000/app/
If you have already run a version prior to step-0 on the master branch, you may see the version of the app that has been cached and refresh the page.
You can now see your page in the browser, which is not very cool, but OK.
This shows "Nothing here yet!" HTML pages are generated by the following code, which contains some of the key elements that we need to delve further into in angular.
app/index.html:
<!doctype html>What is this code doing?
ng-app directive:
Ng-app represents a angular directive called Ngapp (angular using the spinal - case nomenclature as its custom attribute (custom attributes) and uses the CamelCase nomenclature to represent the corresponding implementation (implement) of their directives ). This instruction is used to indicate that the HTML element angular should be considered the root element of our application. This gives the app developer the freedom to specify whether the entire HTML page or just part of the page should be considered a angular application.
AngularJS Script Tag:
<script src= "Bower_components/angular/angular.js" >This line of code loads the Angular.js script, which causes the browser to register a callback (register a callback) during the entire HTML page load. When this callback is executed, angular will look for ngapp instructions. If angular finds this instruction, it will boot (bootstrap) the root element of the entire DOM application in the scope defined by the Ngapp (refer to the original: it would bootstrap the application with the root Of the application DOM being the element on which
ngAppthe directive is defined. (red indicates no end, same as)).Double curly brace Binding expression:
Nothing here {{' yet ' + '! '}}This line of code shows the two core features of the angular temolating capabilities:
• A binding, represented by a double curly brace {{}} ;
• A simple expression ' yet ' + ' ! ' used for this binding;
The binding here tells angular to judge an expression and embed it in the DOM, not just once. As we will see in the next steps, whenever the result of an expression changes, a binding can produce an efficient and continuous update.
The angular expression is a JavaScript-like snippet of code that is angular recognized only within the scope of the current data model, not in the overall global context.
As expected, once the template has been angular processed, the HTML page will contain the content "nothing here yet!".
Boot ANGULARJS Application:
In most cases, it is very easy and appropriate to automatically boot the ANGULARJS application by using the ngapp directive. In some more advanced situations, like using a script loader, you can use manual methods to guide your app.
During the boot process, the following three very important things happened:
1. The syringe to be used for dependency injection has been created;
2. The syringe will create the root scope of the environment that is later used in the data model in our application (root scope);
3.Angular will "compile" the DOM tree from the ngapp root element and handle any instructions and data bindings found in the process.
Once a reference is booted, it waits for browser events (such as mouse clicks, keystrokes, and HTTP requests) that might alter the data model. Once such an event occurs, angular checks to see if this results in any changes to the data model, and once such changes are found, Anglular displays them in the view layer by updating all the affected bindings.
The structure of our current application is very simple. The template contains only one instruction and one static binding, and our data model is empty. It's going to change quickly!
What files are included in my workspace?
Most of the files in your workspace are from Angular-seed-project, which is a typical structure that is used to guide a new angular project. This seed project is preconfigured to install the angular framework (generated by Bower app/bower_components/ Folder ) and create a typical Web application (via npm) through the tools.
To achieve the purpose of this tutorial, we changed the following configuration in Angular-seed:
• Removed the sample application
in app / img / phones / directory added phone picture
in app/< Span class= "PLN" >phones/ directory
• In Bower. Add bootstrap dependency in JSON file
Experiment
Try at index. Add the following expression to the HTML (this will result in a mathematical operation):
<p>1 + 2 = {1 + 2}}</p>Summarize
Let's jump to the next step to add content to our web App!
[Angular Tutorial] 0-bootstraping
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
