How to Use AngularJS to create a simple Web application _ AngularJS-js tutorial

AngularJS can be of great help if you want to adopt various best practices in application creation. All in all, the powerful functions and features of this framework will never disappoint those who have application development needs. Currently, AngularJS is widely used by different types of Web developers, this excellent framework fully proves its ability to meet different needs. As a Web developer, whether you are a beginner or have rich practical experience, selecting an excellent framework is a necessary prerequisite, angularJS is such an ideal solution. When using AnguarJS, you can learn more about application development and how to build better and more attractive application results. AngularJS can be of great help if you want to adopt various best practices in application creation. All in all, the powerful functions and features of this framework will never disappoint those who have application development needs.

AngularJS has many outstanding features. Today we will take a simple application as an example to help you understand how to use it. In combination with Firebase, our simple but practical application can be easily built. As a finished product, the developed application allows you to log on or log on to it and publish articles at any time.

AngularJS and Firebase

AngularJS is currently the most popular JavaScript MVC Framework for Web developers. If you want to create a distinctive application, it is definitely your best choice-thanks to its powerful HTML feature extension. With the help of AngularJS, we no longer need to use a large amount of code to build applications. Its amazing correlation injection and binding mechanism will make application development very convenient.

On the other hand, Firebase can provide excellent support for AngularJS, saving you from the trouble of developing backend support for the created application. With the help of Firebase, our applications will be able to back up data in real time-of course, necessary API calls are still indispensable.

AngularJS itself is quite powerful, but with the help of Firebase, we will be able to bring our application results to another level.

Start from here

Before using AngularJS to create this simple small Web application, you must first download the angular-seed project. After the download is complete, you need to open the corresponding download directory and install the relevance to run. The Code is as follows:

The Code is as follows:

$ Cd angular-seed
$ Npm install # Install the dependencies

The next step is to use the following representatives to start the node Server:

The Code is as follows:

$ Npm start # Start the server

After the node server starts and runs, open the browser and access http: // localhost: 8000/app/index.html. The running default application is displayed.

Next, access the application directory under the angular-seed project folder and save the application code here.

As the core of the application, app. js will also be stored in the application folder. All application-level modules and routes in app. js must be declared.

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

Now we need to create an application from scratch: You need to first open app. js and delete all the existing code. Define our application routing in app. js, which requires you to use ngRoute, one of the modules in AngularJS. By default, app. js does not contain this module. Therefore, we need to manually inject it into the application for use. You can use the following code to add the AngularJS module:

angular.module('myApp', [ 'ngRoute' ]) 

The ngRoute module will bring an important component, namely $ routeProvider, which can perfectly configure routes. We need to use the following code to inject $ routeProvider into the configuration method of angular-module to complete the routing definition:

'use strict'; angular.module('myApp', [ 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { // Routes will be here }]); 

Now we can open index.html. Clear all content in index.html. Only Script Reference and p are retained.

For each route change, we need to adjust the p content according to the above method.

Create a symbol in the view

We need to create a new folder in the app directory and name it home. In this folder, we create another two folders, respectively home.jsand home.html. Start with home.html and add the following code:

   
  
  AngularJS & Firebase Web App 
  
  
    
 
 AngularJS & Firebase App! 
  
  

In home. js, we need to create a routing mechanism to access the home view. You also need to set a controller for $ scope created by the home view. The Controller is always responsible for controlling the corresponding view. The Code is as follows:

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() { }]); 

Now the application is ready. Open app. js and add the myApp. home module to the application. Use the $ routeProvider. otherwise method to declare a set of default routes pointing to the home view for our application. The Code is as follows:

'use strict'; angular.module('myApp', [ 'ngRoute', 'myApp.home'      // Newly added home module ]). config(['$routeProvider', function($routeProvider) { // Set defualt view of our app to home $routeProvider.otherwise({ redirectTo: '/home' }); }]); 

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