AngularJS Tutorial For Beginners | Learn AngularJS (2023)

AngularJS Tutorial

angularjs-tutorials

AngularJS Interview Questions and Answers

angularjs-interview-questions-answers

AngularJS routes enable us to create different URLs for different content in our application. A route is specified in the URL after the # sign. Thus, all the following URLs point to the same <a href="https://tekslate.com/angularjs-tutorials" target="_blank" rel="noopener">AngularJS application</a>, but each points to a different route:
<pre>http://tekslate.com/index.html# view1</pre>
<pre>http://tekslate.com/index.html# view2</pre>
<pre>http://tekslate.com/index.html# view3</pre>
<pre>http://tekslate.com/index.html# view4</pre>
When the browser loads these links, the same AngularJS application will be loaded (located at<code>http://tekslate.com/index.html</code>), but AngularJS will look at the route (the part of the URL after the <code>#</code>) and decide what <a href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener">HTML</a> template to show.
Working AngularJS route example :
<pre class="codeBox">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
 &lt;title&gt;AngularJS Routes example&lt;/title&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body ng-app="sampleApp"&gt;

&lt;a href="#/route1"&gt;Route 1&lt;/a&gt;&lt;br/&gt;
&lt;a href="#/route2"&gt;Route 2&lt;/a&gt;&lt;br/&gt;


&lt;div ng-view&gt;&lt;/div&gt;

&lt;script&gt;
 var module = angular.module("sampleApp", ['ngRoute']);

 module.config(['$routeProvider',
 function($routeProvider) {
 $routeProvider.
 when('/route1', {
 templateUrl: 'angular-route-template-1.jsp',
 controller: 'RouteController'
 }).
 when('/route2', {
 templateUrl: 'angular-route-template-2.jsp',
 controller: 'RouteController'
 }).
 otherwise({
 redirectTo: '/'
 });
 }]);

 module.controller("RouteController", function($scope) {

 })
&lt;/script&gt;</pre>
<h2 style="text-align: justify;">AngularJS Route Module</h2>
The AngularJS Route module is contained in its own <a href="https://tekslate.com/javascript-training/" target="_blank" rel="noopener">JavaScript</a> file. To use it we must include in our AngularJS application.
<pre class="codeBox">&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"&gt;&lt;/script&gt;

</pre>
<h2 style="text-align: justify;">Declaring a Dependency on the AngularJS Route Module</h2>
AngularJS module (called <code>sampleApp</code>) declares a dependency on the AngularJS route module:
var module = angular.module("sampleApp", ['ngRoute']); The application's module needs to declare this dependency in order to use the <code>ngRoute</code> module.
<h2 style="text-align: justify;">ng-view Directive</h2>
the <code>div</code> with the <code>ngView</code> directive (can also be written <code>ng-view</code>) the HTML template specific to the given route will be displayed.
&lt;div ng-view&gt;&lt;/div&gt;
Routes link When one of these links is clicked, the URL in the browser window changes, and the <code>div</code> with the <code>ngView</code>directive will show the HTML template matching the route path.
&lt;a href="#/route1"&gt;Route 1&lt;/a&gt;&lt;br/&gt; &lt;a href="#/route2"&gt;Route 2&lt;/a&gt;&lt;br/&gt;
<pre style="text-align: center;">Aspired to become an AngularJS Developer? Explore the post to discover the know-hows on
 <a href="https://tekslate.com/angularjs-training" target="_blank" rel="noopener">AngularJS Training in Hyderabad</a>.</pre>
<h2 style="text-align: justify;">AngularJs Route Parameters</h2>
There are a number of ways optional parameters can be declared when using UI Router.
<h3 style="text-align: justify;">Query Parameters</h3>
Query parameters are mapped to UI Router's <code>$stateParams</code> object, you need to declare them in your state configuration's URL template:
state('new-qs',
{ url: '/new?portfolioId',
templateUrl: 'new.html',
controller: function($scope, $stateParams) {
$scope.portfolioId = $stateParams.portfolioId;
}
})
create a link to this state using the <code>ui-sref</code> attribute:
&lt;a ui-sref="new-qs({ portfolioId: 1 })"&gt;New (query string)&lt;/a&gt;
This will navigate to <code>/new?portfolioId=1</code>.
Multiple optional parameters, separate them with an <code>&amp;</code>:
state('new-qs', {
url: '/new?portfolioId&amp;param1&amp;param2',
templateUrl: 'new.html',
controller: function($scope, $stateParams) {
$scope.portfolioId = $stateParams.portfolioId;
$scope.param1 = $stateParams.param1;
$scope.param2 = $stateParams.param2;
}
})
<h3 style="text-align: justify;">Optional Route Parameters</h3>
Route parameters in UI Router are optional by default. This means that in the example below both <code>/new/2</code> and <code>/new/</code> would work, but not <code>/new.he <code>?</code> suffix you often see on route parameters simply tells UI Router where the query portion of the URL template should start e.g. <code>/new/:portfolioId?</code>.</code>
Updating the <code>ui-sref</code> attribute to <code>new-rp({ portfolioId: 2 })</code> will produce the link<code>/new/2</code>.
For multiple optional route parameters e.g. <code>/posts/tagged/:tag/page/:page</code> it looks like the only solution right now is to declare multiple routes i.e. <code>/posts/tagged/:tag</code> and<code>/posts/tagged/:tag/page/:page</code>.
<h3 style="text-align: justify;">&nbsp;Non-URL route parameters</h3>
How to pass parameters that do not appear in the URL. This is particularly useful for abstract states.
state('new-nonurl', {
url: '/new',
params: {
portfolioId: null,
},
templateUrl: 'new.html',
controller: function($scope, $stateParams) {
$scope.portfolioId = $stateParams.portfolioId;
}
})
Now <code>ui-sref="new-nonurl({ portfolioId: 3 })"</code> will generate the link <code>\new</code> but still pass the <code>portfolioId</code> parameter in <code>$stateParams</code>.
For an Indepth knowledge on AngularJS, click on below
<ul>
<li><a href="https://tekslate.com/angular-directive/" target="_blank" rel="noopener">Angular Directive</a></li>
<li><a href="https://tekslate.com/mvc-architecture-in-angularjs/" target="_blank" rel="noopener">MVC Architecture</a></li>
<li><a href="https://tekslate.com/angularjs-interview-questions-answers" target="_blank" rel="noopener">AngularJS Interview Questions</a></li>
</ul>

AngularJS Routing | TekSlate AngularJS Route Module

AngularJS Routing

angularjs-routing

AngularJS directives are used to extend <a href="https://tekslate.com/tutorials/html-tutorials/" target="_blank" rel="noopener">HTML</a>. These are special attributes starting with ng- prefix. We're going to discuss following directives &minus;
-ng-app &minus; This directive starts an AngularJS Application.
-ng-init &minus; This directive initializes application data.
-ng-model &minus; This directive defines the model that is variable to be used in AngularJS.
-ng-repeat &minus; This directive repeats html elements for each item in a collection.
<h2 style="text-align: justify;">ng-app directive</h2>
ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. In following example, we've defined a default AngularJS application using ng-app attribute of a div element.
<pre class="prettyprint notranslate prettyprinted">&lt;div ng-app = ""&gt;
 ...
&lt;/div&gt;</pre>
<h2 style="text-align: justify;">ng-init directive</h2>
ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application. In following example, we'll initialize an array of countries. We're using <a href="https://en.wikipedia.org/wiki/JSON" target="_blank" rel="noopener">JSON</a> syntax to define array of countries.
<pre class="prettyprint notranslate prettyprinted">&lt;div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"&gt;
 ...
&lt;/div&gt;</pre>
<h2 style="text-align: justify;">ng-model directive</h2>
ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we've defined a model named "name".
<pre class="prettyprint notranslate prettyprinted">&lt;div ng-app = ""&gt;
 ...
 &lt;p&gt;Enter your Name: &lt;input type = "text" ng-model = "name"&gt;&lt;/p&gt;
&lt;/div&gt;

</pre>
<pre style="text-align: center;">Inclined to build a profession as &nbsp;AngularJs&nbsp;Developer? Then here is the blog post on&nbsp;
<a href="https://tekslate.com/angularjs-training" target="_blank" rel="noopener">AngularJs Training</a>.</pre>
<pre class="prettyprint notranslate prettyprinted">&nbsp;</pre>
<h2 style="text-align: justify;">ng-repeat directive</h2>
ng-repeat <a href="https://tekslate.com/angular-directive/">directive</a> repeats html elements for each item in a collection. In following example, we've iterated over array of countries.
<pre class="prettyprint notranslate prettyprinted">&lt;div ng-app = ""&gt;
 ...
 &lt;p&gt;List of Countries with locale:&lt;/p&gt;
 
 &lt;ol&gt;
 &lt;li ng-repeat = "country in countries"&gt;
 {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
 &lt;/li&gt;
 &lt;/ol&gt;
 
&lt;/div&gt;

</pre>
<pre style="text-align: center;">Check out the top <a href="https://tekslate.com/angularjs-interview-questions-answers" target="_blank">AngularJS&nbsp;Interview Questions</a> now!</pre>
<pre class="prettyprint notranslate prettyprinted">&nbsp;</pre>
<h2 style="text-align: justify;">Example</h2>
Following example will showcase all the above mentioned directives.
testAngularJS.htm
<pre class="prettyprint notranslate tryit prettyprinted">&lt;html&gt;
 
 &lt;head&gt;
 &lt;title&gt;AngularJS Directives&lt;/title&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;h1&gt;Sample Application&lt;/h1&gt;
 
 &lt;div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"&gt; 
 &lt;p&gt;Enter your Name: &lt;input type = "text" ng-model = "name"&gt;&lt;/p&gt;
 &lt;p&gt;Hello &lt;span ng-bind = "name"&gt;&lt;/span&gt;!&lt;/p&gt;
 &lt;p&gt;List of Countries with locale:&lt;/p&gt;
 
 &lt;ol&gt;
 &lt;li ng-repeat = "country in countries"&gt;
 {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
 &lt;/li&gt;
 &lt;/ol&gt;
 &lt;/div&gt;
 
 &lt;script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
 
 &lt;/body&gt;
&lt;/html&gt;</pre>
<h2 style="text-align: justify;">Output</h2>
Open textAngularJS.htm in a web browser. Enter your name and see the result.a

directives in angularjs

Directives in Angularjs

directives-in-angularjs