Love Trivedi: September 2015

Wednesday 30 September 2015

How to create single page application using angular js

Hi guys, Angular js a grate framework to build single page application. Angularjs is most popular framework to build single page application.
In this post I am showing you that how to use routing (ng-route) to build a single page app using angular.
For routing we have to include angular-route.js in our angular project. and our html will look like and for rendering the different views of our application we will use ng-view directives in our body section where we want to render the different views.
I have also included 2 more files app.js and controller.js.
In app.js file we will define the app also write the routing code. and in controller.js we will write the controllers.
We can create multiple controllers in a single js files. but If you have lots of functionality than you should create different files for different controllers. I have created a single file for controllers controller.js
I have also created a basic navigation bar for switching the view.

In app.js file I am defining app and also defining routes using ng-route. I have added ng-route dependency in my module. I have to use the config function for configuring the routes. you can see in the code snippet.

when('/view1'): The view1 view will be shown when the URL hash fragment is /view1. To construct this view, Angular will use the view1.html template and the view1 controller.

View1.html

when('/view2'): The view2 view will be shown when the URL hash fragment matches '/view2', . To construct the phone details view, Angular will use the view.htmltemplate and the view2 controller.

View2.html

otherwise({redirectTo: '/'}): triggers a redirection to / when the browser address doesn't match either of our routes.

Now you can see it in action. you can switch between views by just clicking on navbar and the view will change. check the example below

Tuesday 29 September 2015

How To Start With Angular JS

There are so many tutorials and videos for start up with angularjs. When I was started with angularjs I found that most of tutorials are too confusing.
So I am showing that How to create a basic app with angularjs.

What We Need For Startup

Text Editor(sublime text, notepad++, dreamweaver)
Browser (chrome, firefox),
angularjs Library. You can download it from angularjs.org

Create a file named index.html and create a initial html page.and attach angularjs library in your html page. In this page I am showing you how the ng-model works and how to bind the data.Now you can see the results in the result tab of codepen demo. So for data binding we just need to add an angular library.
In Next Post I will let you know that How to create single page application using angular js.

<html ng-app="">  
 <head>  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  
 </head>  
 <body>  
   <p>First Name : <input type="text" ng-model="f_name" placeholder="First Name"></p>  
   <p>Last Name : <input type="text" ng-model="l_name" placeholder="LastName"></p>  
   <h1>Hello {{f_name}} {{l_name}}</h1>  
 </body>  
 </html>

See the Pen jbyZQL by Love Trivedi (@lovetrivedi) on CodePen.