CategoryAngularjs

Angularjs sample application

This application combined with angular-seed & ui-router module which will help people to understand SPA (Single-page-application) navigation’s using AngularJS

This project followed the following concepts
> Directory structure followed from angular-seed (90%) (https://github.com/angular/angular-seed)
> Bootstrap template used (Third party template, http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/)
> Routers (ui-router) (https://github.com/angular-ui/ui-router)…Also please check http://www.amasik.com/angularjs-ngroute-vs-ui-router/
> Controllers
> Factories
> Directive
> Module Specific (As per angular-seed project)
> Third party modules (Datatable, Form validation, d3 chart..etc..,)

Navigation’s:

> Register
> Login
> Logout
> Dashboard
> Reports
> Customers – List, View & Edit
> Add Customer

Note: All data coming from mock JSON file.

Demo: http://amasik.com/demo/angularjs/angular-app/
Download:  https://github.com/mail2asik/angular-app

Execute script in each partial loads in Angularjs

By default, Angularjs is not loading script if we put it in partial HTML. Also, it is compiling the HTML  once template is loaded. So subsequent request template will be loaded from browser cache instead of from server.

In some cases, we want to execute some codes whenever partials loaded (for eg: Tracking page count code, putting Google Analytics code or any other tracking code).

So the solution is to call Jquery before loading Angularjs. This way, Angular in-built JQlite is detached and Angular will use full fledged of external Jquery.

index.html

The following partials are used in this demo.
– home.html
– projects.html
– services.html
– downloads.html
– about.html
– contact.html

Each file contains inline script with console log and it will be printed whenever the partials are loaded.

Demo: http://www.amasik.com/demo/angularjs/exec_inline_script/
Enable developer tool and check the console log.

Angularjs simple front-end apps using ngRoute

Angularjs is very flexible for Single Page Application(SPA). This post explains you that how we can perform navigating between one view to another view using ngRoute module and used Bootstrap for layouts. Please go to this post If you are interested this demo using ui-router module.

Sample:

http://www.amasik.com/demo/angularjs/front-end-ng-route/index.html

Module Source: https://code.angularjs.org/1.3.2/angular-route.min.js

Dependent Module: ngRoute

Router Provider:

Default View Config:

Router Config:

View Directive: ng-view

Templates: Used In-line templates home.html, projects.html..etc., (Refer code)

Link Directive : href=”#/home”  (use html href directly)

Source Code:

HTML

js

 

Angularjs simple front-end apps using ui-router

Angularjs is flexible for Single Page Application(SPA). This post explains you that how we can perform navigating between one view to another view using ui-router module and Bootstrap for layouts. Please go to this post If you are interested this demo using ngRoute module.

Sample:

http://www.amasik.com/demo/angularjs/front-end-ui-router/index.html

Module Source: http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js

Dependent Module: ui.router

Router Provider:

Default View Config:

Router Config:

View Directive: ui-view

Templates: Used In-line templates home.html, projects.html..etc., (Refer code)

Link Directive : ui-sref=”home”  (here ‘home’ is a state, not url)

Full Source:

HTML

JS

 

Angularjs ngRoute vs ui-router

Router is playing important role in Single Page Application (SPA). It is getting & applying the Partials/Views/Templates into corresponding places. Also, using this technique, navigation between  one view to another view is performed.

ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.

URL: https://docs.angularjs.org/api/ngRoute

> Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.

URL: https://github.com/angular-ui/ui-router

Some of the difference between ui-router and ngRoute

Open in new tab for better results:

http://www.amasik.com/demo/angularjs/uiRouter-vs-ngroute/index.html

Sample  App:

ngRoute:

http://www.amasik.com/angularjs-simple-front-end-apps-using-ngroute/

ui-router:

http://www.amasik.com/angularjs-simple-front-end-apps-using-ui-router/

Angularjs directive scopes

The significance feature of Angularjs is Directive. Angularjs is HTML enhanced for web apps. Means, developer can introduce new HTML element (eg: <datatable>) or new attribute ( goTo=””) whenever needed and write a script for their behavior. We should know about the scope of directives. So that we can write Directive efficiently.

I assume that you have some prior knowledge regarding directive. This post explains the type of scope can be used for directives.

1. scope: false (Default)

This is default behavior. you can get the parent scope inside directive and this scope will be act as two-way data binding. Means, if you change the scope inside directive, then it will be changed in parent.

Example: (Check country scope/model)

Code:

2. scope: true (Inherit scope)

You can get the parent scope inside directive and this scope will be act as one-way data binding. Means, if you change the scope inside directive, then it will not be changed in parent.

Example: (Check country scope/model)

Code:

 

3. scope:{} (Isolated scope)

You can pass particular scopes inside directive through attributes and you may decide whether these scopes will be act as two-way data binding (=) or one-way data binding (@).

Example: (two-way data binding) (Check country scope/model)

Code:

 

Example: (one-way data binding) (Check country scope/model)

Code:

 

© 2017 Asik Blog

Theme by Anders NorenUp ↑