Angular JS TutorialsWeb Development

Angular JS – Develop Local Working App with Fixed Cross Domain Issue

In this web guide, you will learn how to create a working local app using Angular JS. If you want to create an application that users can user on their desktop then you can create this local app very easy. This local app will work without any local server setup. You can easily run these types of app by running index.html in any browser.

HTML Files can easily run by opening it in any browser that supports HTML. But if you want to create a dynamic app that loads page using ajax then it is not possible. This is so because you will get warning cross domain issue. To fix this issue you have to create app using Angular JS library. Follow the steps to create a local app that works on any desktop, laptop and even a mobile.

Steps to create Local App with Angular JS

  1. Download Angular JS Library from official Angular JS website https://angularjs.org/
    Angular JS Download
  2. Click Download Angular JS button then save it in your computer.
  3. Create a folder any where in your computer then name it with your choice. In my case folder name is testapp.
  4. Then copy the file you download and paste it in folder you have created in step 3
  5. Create a new file index.html in that foler. You can change file name with any name but make sure you have created file with extension .html.

Setting Up Angular JS with Angular JS Route

  1. Final structure of your app folder will be as
    Angular JS Test App
  2. Open index.html in any  editor you want. I am using Sublime text to edit this file. You can also open it simple notepad.
  3. Add some basic startup html tags in index.html as show below
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test App</title>
    </head>
    
    <body>
    </body>
    
    </html>
    
  4. Now call angular js library using script tags just before </body> tag as show below
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test App</title>
    </head>
    
    <body>
    
       <script src="angular.min.js"></script>
    </body>
    
    </html>
    
  5. Download Angular JS Route Library from here then save it in same folder you created for app
  6. Call Angular JS Route library using script tags after Angular JS Library and before body tag as show below
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test App</title>
    </head>
    
    <body>
    
       <script src="angular.min.js"></script>
       <script src="angular-route.min.js"></script>
    </body>
    
    </html>

Angular JS Route Library will make your app working without any server then you have to just open in browser.

Creating Test App with Angular JS

After you setup all library for creating app then follow the steps below to create a test app with angular js and angular js route.

  1. Open same file index.html in any editor then copy below code and paste before angular js library as shown below
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test App</title>
    </head>
    
    <body>
       <!--Menu-->
       <ul>
           <li><a href="#">Page1</a></li>
           <li><a href="#!page2">Page2</a></li>
           <li><a href="#!page3">Page3</a></li>
       </ul>
       <!--Menu-->
       
       <div ng-view></div>
       
       <script src="angular.min.js"></script>
       <script src="angular-route.min.js"></script>
    </body>
    
    </html>
    
  2. Div <div ng-view></div> is the container where your pages data will load.
  3. After adding menu and Angular JS view div then add attribute in body tag ng-app=”app” . Final code will be like as below
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test App</title>
    </head>
    
    <body ng-app="app">
       <!--Menu-->
       <ul>
           <li><a href="#">Page1</a></li>
           <li><a href="#!page2">Page2</a></li>
           <li><a href="#!page3">Page3</a></li>
       </ul>
       <!--Menu-->
       
       <div ng-view></div>
       
       <script src="angular.min.js"></script>
       <script src="angular-route.min.js"></script>
    </body>
    
    </html>
  4. Remember every link in Angular JS will be #!pagename. After that we will configure Angular JS Router, for that copy below and paste it after angular js route library as show below
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test App</title>
    </head>
    
    <body ng-app="app">
       <!--Menu-->
       <ul>
           <li><a href="#">Page1</a></li>
           <li><a href="#!page2">Page2</a></li>
           <li><a href="#!page3">Page3</a></li>
       </ul>
       <!--Menu-->
       
       <div ng-view></div>
       
       <script src="angular.min.js"></script>
       <script src="angular-route.min.js"></script>
       <script>
       var app = angular.module('app', ['ngRoute']);
       
       //Controllers
       function IndexCtrl()
       {
    	   
       }
        
       //Setting Up Router
       app.config(function($routeProvider){
    			  $routeProvider.when('/', { 
    				controller: 'IndexCtrl',
    				templateUrl: 'page1.html'
    			  })
    			  .when('/page2', { 
    				controller: 'IndexCtrl',
    				templateUrl: 'page2.html'
    			  })
    			  .when('/page3', {  
    				controller: 'IndexCtrl',
    				templateUrl: 'page3.html'
    			  }) 
    			  
    			});
       //Setting Controllers
       app.controller('IndexCtrl', this.IndexCtrl); 
       
       //Templates
       app.run(function ($templateCache){
           $templateCache.put('page1.html', 'Page1 Content');
    	   $templateCache.put('page2.html', 'Page2 Content');
    	   $templateCache.put('page3.html', 'Page3 Content');
       });
       </script>
    </body>
    
    </html>
    

     

  5. Save the file then run index.html file in chrome browser you will see as below.
  6. When you click link Page 2 then it will show
    Angular JS App Preview 2
  7. That’s it your local app is ready now.

Details about code

<script>
   var app = angular.module('app', ['ngRoute']);
   
   //Controllers
   function IndexCtrl()
   {
	   
   }
    
   //Setting Up Router
   app.config(function($routeProvider){
			  $routeProvider.when('/', { 
				controller: 'IndexCtrl',
				templateUrl: 'page1.html'
			  })
			  .when('/page2', { 
				controller: 'IndexCtrl',
				templateUrl: 'page2.html'
			  })
			  .when('/page3', {  
				controller: 'IndexCtrl',
				templateUrl: 'page3.html'
			  }) 
			  
			});
   //Setting Controllers
   app.controller('IndexCtrl', IndexCtrl); 
   
   //Templates
   app.run(function ($templateCache){
       $templateCache.put('page1.html', 'Page1 Content');
	   $templateCache.put('page2.html', 'Page2 Content');
	   $templateCache.put('page3.html', 'Page3 Content');
   });
   </script>

In above code first we define variable with name app then we call angular js module with your app as mention below.

var app = angular.module('app', ['ngRoute']);

After that we define function with name IndexCtrl that we will use as a controller for particular page. This function will behave as a controller and you can create separate controllers for each page as shown below

//Controllers
function IndexCtrl()
{
	   
}

Configuring Router

After that you will setup Angular Router so your links will target particular html page as show below

//Setting Up Router
app.config(function($routeProvider){
	$routeProvider.when('/', { 
           controller: 'IndexCtrl',
	   templateUrl: 'page1.html'
	})
	.when('/page2', { 
	   controller: 'IndexCtrl',
	   templateUrl: 'page2.html'
	 })
	 .when('/page3', {  
	   controller: 'IndexCtrl',
	   templateUrl: 'page3.html'
	 }) 
			  
});

In above code you can see “when” condition which checks url and then inside it we target a file using templateUrl  page1.html. Similary, when url will be #!page2 then it will target page 2 . In “when”  we have also defined controller for particular page. I am using same controller for particular page.

Then you have to target all controllers to their function as show below

Setting Up Controllers

//Setting Controllers
app.controller('IndexCtrl', IndexCtrl);

Remember function name must be similar to name you define above

Adding pages in templatecache

//Templates
   app.run(function ($templateCache){
       $templateCache.put('page1.html', 'Page1 Content');
	   $templateCache.put('page2.html', 'Page2 Content');
	   $templateCache.put('page3.html', 'Page3 Content');
   });

If you check template url in when condition then you will see that it is page1.html when url will be “/” . It will search for page1.html in your app folder which actually does not exists. We do not need to create any files for loading. If we create files then it will show error “Cross Domain is not supported”. For remove error we use Angular JS template cache module which will load content for particular page as shown above. Replace Page 1 content with your html code you want to load. Similarly do this for all pages. Template cache will fix your “Cross domain issue”.

For any questions and queries please comment down below.

 

Tags

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button