Home > Developer > Web Develop
Learn a new language we always come to the word ' hello,world! ', and we look at how Angularjs's HelloWorld version is implemented.
1, first we download Angularjs library, you can download from the official website angularjs.org or GitHub, you can also find the corresponding library file from the Angular-seed project on GitHub, or you can load the file via Google's CDN network. Introduced into a file with a script tag
2. Development tools
JS development of the Artifact Webstorm, super-strong reconstruction ability, karma,grunt support, JS Code Auto-complement the full ability of support and so are to attract JS developers good features, after installation you can find a shortcut in the installation directory of the document, more features to slowly explore it, Good luck! But there is not much good news for us, this is for a fee. But in our celestial this is not a big problem well, cracked version, search registration code are done drops, download please poke here: http://www.jetbrains.com/products.html#javascript
There is also a relatively small tool is worth trying, that is sublime, although the tool is small but can install various types of plug-ins to achieve automatic completion, such a good tool you deserve!
3. AngularJS First Demo
<meta charset= "Utf-8" >
<title>angularjs demo</title>
<script src= "Lib/angular.js" type= "Text/javascript" charset= "Utf-8" ></script>
<body >
<DIV>
<input type= "Input" name= "name" ng-model= ' name1 ' >
<p>Hello,{{name1}}</p>
Hello,<span ng-bind= "Name1" ></span>
</DIV>
<DIV>
Name: {' Eason ' + ' _ ' + ' Hou '}}
</DIV>
</body>
Description: The NG-APP directive is angularjs specific, used to illustrate the scope of the angular program, this instruction can be placed in any HTML element, if placed in the body, then the body part is the scope of the ANGULARJS program.
<input type= "Input" name= "name" ng-model= ' name1 ' > in this input we use the Ng-model directive to declare a model with the name name1, This allows the input data to be bound to name1, which is the core concept of Angularjs: Data-bind,view input is dynamically refreshed into the model
<p>Hello,{{name1}}</p>
Data binding through {{}} allows us to insert the value of a variable into the DOM, and a colleague can guarantee that it will synchronize automatically. So when you enter world in input, the page automatically displays the input and does not need to bind other events.
<span ng-bind= "Name1" ></span>
Ng-bind is also data binding, and {{name1}} has the same functionality. This scenario is: when our angular library fails to load, it will be displayed as "{{name1}}" without displaying the model value, so you can use Ng-bind if the library file fails to load and will appear empty.
HelloWorld first introduced here, the next chapter introduces scope and controller basic usage, please look forward to!
This article is from the "Eason's HCC" blog, so be sure to keep this source http://hcc0926.blog.51cto.com/172833/1555198
HelloWorld of ANGULARJS Training
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
