How to use Angularjs to build a simple Web application _angularjs

Currently, different types of Web developers are using ANGULARJS extensively, and this excellent framework also fully demonstrates their ability to meet different needs. As a web developer, whether you're just getting started or have a lot of practical experience, choosing a good framework is a necessary work premise, and Angularjs is the ideal solution. In the process of using ANGUARJS, you can learn more about application development and how to build better and more attractive application results. Angularjs can also be a great help if you want to take a variety of best practices in the creation of your application. In short, the powerful features and features of this framework will never disappoint friends with application development needs.

Angularjs has a number of fantastic features, today we'll take a simple application to help you understand how to use it. In conjunction with the firebase, our simple but practical application can be easily built and completed. As a finished product, this application, which is developed, allows you to log in and post articles at any time.

Introduction of Angularjs and Firebase

Angularjs is currently the most popular JavaScript MVC framework for Web developers. If you want to create a different app, it's definitely the best choice for you-thanks to its powerful HTML feature extension. With the help of Angularjs, we no longer need to use a lot of code to build applications, and its astonishing correlation injection and binding mechanism makes application development exceptionally easy.

On the other hand, Firebase can provide excellent support for ANGULARJS, which eliminates the worry of developing back-end support for the applications you create. With the help of firebase, our applications will be able to backup data in real time--and, of course, the necessary API calls are unavoidable.

Angularjs itself is already quite powerful, but with the help of firebase, we will be able to bring our application to a higher level.

Start from here

Before you start using ANGULARJS to create this simple little Web application, you first need to download the Angular-seed project. After the download is complete, you need to open the corresponding download directory and install the correlation to achieve the operation. The specific code looks like this:

Copy Code code as follows:

$ CD Angular-seed
$ NPM Install # Install the dependencies

The next step is to start the node server with the following representatives:

Copy Code code as follows:

$ npm Start # # Start the server

Once the node server is up and running, we need to open the browser and Access http://localhost:8000/app/index.html, which displays the default application that is running.

Next you access the application directory under the Angular-seed project folder, where the application code is stored.

As the core of the application, App.js will also reside in the application folder. All application-level modules and routes within the app.js need to be declared.

In addition, you will find two views of angular-seed here, view 1 and view 2. They always exist in the default form. We need to delete these views in the application folder.

Now we're going to create the application from scratch: you first need to open the App.js and delete all the existing code. Defining our application routing in app.js requires that you use one of the modules in the NGROUTE,ANGULARJS. App.js does not contain the module by default, so we need to manually inject it into the application to use it. You can use the following code to complete the Angularjs module add work:

Angular.module (' myApp ', [ 
' Ngroute ') 

The Ngroute module will bring an important component, the $routeprovider, that can be configured perfectly for routing. We need to use the following code to inject $routeprovider into the Angular-module configuration method to complete the routing definition:

' Use strict '; 
Angular.module (' myApp ', [ 
' Ngroute ' 
]). 
Config ([' $routeProvider ', function ($routeProvider) { 
//Routes'll be 

After completing the above steps, we can now open the index.html. Clears all the contents of the index.html, leaving only the script references and Div.

Every time we make a routing change, we need to adjust the div content according to the above methods.

Create a symbol in a view

We need to create a new folder in the app directory and name it home. In this folder, we create an additional two folders, Home.js and home.html, respectively. First open home.html and add the following code:

<! DOCTYPE html>  

In Home.js, we need to create a mechanism to access the home view. You also need to set up a set of controllers for the $scope created by the home view. The controller is always responsible for controlling the specific view that corresponds to it. The specific code looks like this:

Use strict '; 
Angular.module (' Myapp.home ', [' Ngroute ']) 
//declared route 
. config ([' $routeProvider ', function ($ Routeprovider) { 
$routeProvider. When ('/home ', { 
templateurl: ' home/home.html ', 
controller: ' Homectrl ') 
}); 
}]) 
Home controller 
. Controller (' Homectrl ', [function ()] { 

The application is now ready. Open the App.js and add the Myapp.home home module to the application. Use the $routeprovider.otherwise method to declare a set of default routes for our applications that point to the home view, as shown in the following code:

' Use strict '; 
Angular.module (' myApp ', [ 
' Ngroute ', 
' myapp.home '      //newly added home module 
]). 
Config ([' $routeProvider ', function ($routeProvider) { 
//Set defualt view of our apps to home 
$ Routeprovider.otherwise ({ 
redirectto: '/home ' 
}); 

If you want to display your home page, add home.js to the application's main HTML template file. To complete this operation, open the index.html file and 湢 the following code:

Now that all work has been done, the application is ready to be run! To start using this app, we need to reboot the server and point our browser to http://localhost:8000/app/index.html to access the login page, where you can access the application.

If you need to use Firebase (for specific reasons as described earlier), you need to create a firebase account first. After the account creation is complete, we add the created application URL that is displayed on the screen, and then click Manage this application.

Does it feel good to create your own application? Angular.js can provide everything we need for this kind of development work. And just a few minutes, our simple small application has been officially online!