Home > Developer > Web Develop
AngularJS redefined how the front-end application was developed. In the face of the line between HTML and JavaScript, it is not shy, but the positive attack, put forward an effective solution.
Many front-end application development frameworks, such as backbone, EMBERJS, etc., require developers to inherit some JavaScript objects specific to this framework. This approach has its merits, but it unnecessarily pollutes the developer's own code object space and requires the developer to understand the abstract objects in memory. Even so we accepted this approach, because the initial design of the network did not provide the interactivity we needed today, so we needed a framework to help us fill the gap between JavaScript and HTML.
The AngularJS filled the gap.
And with it, you don't have to "directly" manipulate the DOM, just give your dom a metadata (i.e. the directive in Angularjs) and let Angularjs help you manipulate the DOM.
At the same time, ANGULARJS does not rely on (and does not hinder) any other framework. You can even develop ANGULARJS applications based on other frameworks.
It's so easy to use. Sounds pretty good? It's pretty awesome. With this seven-step series, we'll take you through the Angularjs to write a great app-whether you've been in touch before or not. Follow us and we will teach you to become an expert ANGULARJS developer.
But first we have to figure out: When should we use ANGULARJS?
ANGULARJS is a mv* framework that is best suited for developing client-side single-page applications. It is not a library of functions, but a framework for developing dynamic Web pages. It focuses on extending the functionality of HTML, providing dynamic data binding, and it works well with other frameworks such as jquery.
If you're developing a single-page application, Angularjs is your top choice. Apps like Gmail, Google Docs, Twitter, and Facebook all have the ANGULARJS advantage. But applications such as game development that do a lot of manipulation of the DOM, or simply require very high speeds, are not angularjs.
Read the above introduction, now is your study Angularjs to understand the first topic:
1. How to start developing an application
In this series of tutorials, we will develop an audio player for NPR (National Public Radio), which will display the latest stories from the Morning Edition program and play them in our browser. Complete version of the demo can be seen here: http://www.ng-newsletter.com/code/beginner_series/)
Writing ANGULARJS applications, we will write the interactive level and presentation layer together.
This may seem a bit odd at first, especially if you've used other frameworks to treat these two layers separately. However, once you touch the trick, AngularJS's writing will become your second nature.
Let's take a look at one of the simplest applications that can be developed with ANGULARJS:
(This interactive example can be experienced in the original English text.) ）
You see, effortless, you get two-way data binding.
Two-way data binding means that you can change the data in the background, and these changes will immediately appear as magic in the view (there is actually no magic here, we will see how this is done later.) ）
Similarly, if you make changes to the view (such as writing something in a text box), your model will be automatically updated.
So what exactly did we do in the application?
First, we write the Ng-app attribute of the most important (and most easily forgotten) part of the:
Secondly, we tell Angularjs that the model of "yourName" on the page is bound to two-way data.
Thirdly, we tell Angularjs that the "yourName" model data is displayed on the "{{yourName}}" instruction template.
Just so much. We developed a dynamic application, an application that would have cost much more time and code to develop: here we don't need to write any rules for two-way data binding, do not need to write any code to the update model and view, or even need to write any model--in fact, We haven't even started to touch JavaScript yet. We don't need to write code until we want to develop more personalized application behavior.
You will see that all of this is thanks to Angularjs's powerful design.
Develop your app
In this section we look at an application, which we call "myApp". Following the tutorial, you can use Git to clone the code base of this tutorial series (see below), or follow the instructions to write your own code.
Create a index.html file that reads as follows:
Then create the folder JS, and then create the file Main.js inside. The following GIT commands are used:
This HTML page will load two JavaScript files: Angularjs and our app: Main.js. Almost all of the work we do in this section is in this main.js file.
To extend and personalize our application, we have to write some JavaScript code. All JS code, we will write in the Main.js file.
Angular.module
To define a ANGULARJS application, we first need to define a ANGULARJS module (angular.module). The so-called Angularjs module is actually a collection of functions that will be executed when the application is launched (in this tutorial series, we are not going to introduce the settings and the running parts of the app, which will be discussed later in the tutorial). ）
Next, we'll define our ANGULARJS module in the Main.js file:
With this line of code, we created the Angularjs module called "MyApp". (now don't worry about the second parameter here-the empty array [], and then we'll come back and discuss it.) ）
Now we're going to instantiate our MyApp module on the page and tell Angularjs what part of the DOM structure our app is running on. To instantiate a module on a page, we use the NG-APP directive, which tells Angularjs that our module has that part of the DOM structure.
By passing in our application's name as the value of the ng-app instruction, we can instantiate our application (module) on the index.html page:
Refresh the page, and now Angularjs will boot up our MyApp.
We can put Ng-app on any DOM element, and then that element becomes the place where Angularjs starts running our app. With this step, we can write Angularjs apps on any page, even if the rest of the page is not an app written in Angularjs.
If an application controls the entire page, you can write the ng-app instruction directly on the HTML element.
Once we've defined our app, we're ready to start creating other parts of it. We will use $scope to create it, which is one of the most important concepts of ANGULARJS. We will delve into the $scope service in the second part of this seven-step series.
Well, now that we have a basic structure for the ANGULARJS application, it will be the starting point for our NPR audio player app.
This novice tutorial code for the GIT library is here: https://github.com/auser/ng-newsletter-beginner-series.
To download this codebase locally, first make sure you have Git installed and clone this git library, check out branch Part1:
Seven steps from Angular.js rookie to expert (1): How to start "Turn"
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
