PureSourceCode.com - AngularJsAll technologies, only pure source codehttp://puresourcecode.com/
http://www.rssboard.org/rss-specificationBlogEngine.NET 3.3.6.0en-GBhttp://puresourcecode.com/opml.axdhttp://www.dotnetblogengine.net/syndication.axdEnrico RossiniPureSourceCode.com0.0000000.000000First AngularJs example<p>If you are looking around for a new job as .NET developer, all companies are asking you <strong>AngularJs</strong>. Then I’m starting to learn it and I share with you the secret of this framework.</p> <p>I’m assuming you are a .NET developer like me and you want to learn AngularJs and then I won’t explain you the basis of HTML.</p> <p>Open Visual Studio and create a new solution with <strong>ASP.NET Empty web Site</strong>.</p> <p><a href="http://puresourcecode.com/javascript/image.axd?picture=AnguarJS1-CreateEmptySolution-VisualStudio2017.png"><img title="AnguarJS1-CreateEmptySolution-VisualStudio2017" style="margin: 0px auto; border: 0px currentcolor; border-image: none; float: none; display: block; background-image: none;" border="0" alt="AnguarJS1-CreateEmptySolution-VisualStudio2017" src="http://puresourcecode.com/javascript/image.axd?picture=AnguarJS1-CreateEmptySolution-VisualStudio2017_thumb.png" width="640" height="444" /></a></p> <p>Now you have your project.</p> <p><a href="http://puresourcecode.com/javascript/image.axd?picture=AnguarJS1-EmptySolution-VisualStudio2017.png"><img title="AnguarJS1-EmptySolution-VisualStudio2017" style="margin: 0px auto; border: 0px currentcolor; border-image: none; float: none; display: block; background-image: none;" border="0" alt="AnguarJS1-EmptySolution-VisualStudio2017" src="http://puresourcecode.com/javascript/image.axd?picture=AnguarJS1-EmptySolution-VisualStudio2017_thumb.png" width="373" height="323" /></a></p> <p>Add from <strong>NuGet AngularJS.Core</strong>.</p> <p><a href="http://puresourcecode.com/javascript/image.axd?picture=AnguarJS1-AddAngularJs-from-NuGet-VisualStudio2017.png"><img title="AnguarJS1-AddAngularJs-from-NuGet-VisualStudio2017" style="margin: 0px auto; border: 0px currentcolor; border-image: none; float: none; display: block; background-image: none;" border="0" alt="AnguarJS1-AddAngularJs-from-NuGet-VisualStudio2017" src="http://puresourcecode.com/javascript/image.axd?picture=AnguarJS1-AddAngularJs-from-NuGet-VisualStudio2017_thumb.png" width="640" height="312" /></a></p> <p>Done. We start now with a little complicate example. Two examples.</p> <h2>StartHere.html</h2> <pre class="brush: xml;">&lt;!DOCTYPE html&gt;
&lt;html ng-app=&quot;myApp&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src=&quot;Scripts/angular.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body ng-controller=&quot;ExampleController&quot;&gt;
&lt;h1&gt;Game setup&lt;/h1&gt;
&lt;div ng-repeat=&quot;player in players&quot;
ng-init=&quot;playerIndex = $index&quot;&gt;
&lt;ng-include src=&quot;'player.html'&quot;&gt;&lt;/ng-include&gt;
&lt;/div&gt;
&lt;script&gt;
(function () {
&quot;use strict&quot;;
var myAppModule = angular.module('myApp', []);
myAppModule.factory('playerService', function () {
var playerCount = 0;
var createDefaultPlayer = function () {
playerCount += 1;
var player = {
name: &quot;&quot;,
prevName: &quot;&quot;
};
player.onNameFocused = function () {
player.prevName = player.name;
};
return player;
}
return {
createPlayer: function (name) {
var player = createDefaultPlayer();
player.name = name;
return player;
},
getPlayerCount: function () {
return playerCount;
}
};
});
myAppModule.controller('ExampleController', ['$scope', 'playerService',
function ($scope, playerService) {
$scope.players = [playerService.createPlayer('Player1'),
playerService.createPlayer('Player2'),
playerService.createPlayer('Player3')];
}
]);
}());
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2>player.html</h2>
<pre class="brush: xml;">&lt;h2&gt;Player {{$playerIndex + 1}}&lt;/h2&gt;
&lt;label&gt;Name:&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Enter Player {{$playerIndex + 1}}&quot;
ng-model=&quot;player.name&quot; ng-focus=&quot;player.onNameFocused()&quot; /&gt;
&lt;h3 ng-show=&quot;player.name&quot;&gt;
Player {{$playerIndex + 1}} name is {{player.name}}
&lt;/h3&gt;
&lt;h3 ng-show=&quot;player.prevName&quot;&gt;
Prev Player {{$playerplayerIndex + 1}} name was
{{player.prevName}}
&lt;/h3&gt;
</pre>
<h2>Explanation </h2>
<p>JavaScript frameworks such as <strong>Backbone.js</strong>, <strong>knockout.js</strong>, <strong>AngularJs</strong> and others addressed the problems of scalability, reusability, and testability by embracing a design pattern traditionally used by server-side frameworks.</p>
<p>This pattern is called <a></a><strong>Model-View-Controller</strong> (<strong>MVC</strong>), and it is an established pattern that was originally introduced in the 1970s. You should already be familiar with it from the ASP.NET MVC fundamentals, but I will revisit it here for reference.</p>
<blockquote>
<p>Technically, AngularJS uses a variant of the MVC, which is closer to the <a></a><strong>Model-View-ViewModel</strong> (<strong>MVVM</strong>) pattern, but the definition of MVC from the next section still applies to it. One of the core members of the AngularJS team declared the main design pattern behind AngularJS as being &quot;Model-View-Whatever works for you&quot; (MVW or MV*) in this post at <a href="http://plus.google.com/+AngularJS/posts/aZNVhj355G2">http://plus.google.com/+AngularJS/posts/aZNVhj355G2</a>.</p>
</blockquote>
<p>The design <a></a>pattern is <a></a>specific for applications with user interfaces and introduces a separation between the following aspects:</p>
<ul>
<li>
<p><strong>Model</strong>: This is the<a></a> application data and the business logic associated with it</p>
</li>
<li>
<p><strong>View</strong>: This is <a></a>the output of the application data in any form that can be consumed or manipulated by a user</p>
</li>
<li>
<p><strong>Controller</strong>: This<a></a> is the logic to get data from the View to the Model and back, and to manage any interaction with the View or the Model</p>
</li>
</ul>
<p>The first highlighted attribute is <code>ng-app</code>, which has a value this time around. The <code>myApp</code> value represents the unique identifier of the current AngularJS application. The next highlighted code initializes a new AngularJS component called module, which will be used via the <code>myApp</code> identifier to bootstrap the AngularJS application.</p>
<p>A module is a container-like object with a unique identifier that groups together the AngularJS components used to build an application: controllers, directives, and others, such as providers, factories, services, values, constants, animations, and filters. The module has methods that are specific to the AngularJS application components I mentioned.</p>
<p>The module <code>controller</code> function takes the controller name and controller constructor function as arguments.</p>
<p>The first <a></a>highlighted snippet is the service definition that looks <a></a>similar to a controller definition, with the exception that it returns an object that represents the service factory. This object is used to create the service instance that will be injected in all of the AngularJS components that have this service declared as a dependency.</p>
<p>In the new service, we transformed the previous controller code into a function called <code>createDefaultPlayer()</code>, which will create a new object that represents a player. The service instance has a method to create a new player with a predefined name called <code>createPlayer(name)</code>. The service factory function will keep track of how many player objects were created using the <code>playerCount</code> variable. The variable will be returned by the service instance function, <code>getPlayerCount()</code>. On a side note, you can see the revealing module pattern in action here. Although the script section is now bigger, we obtained new features such as code reusability and flexibility to provide more complex functionality than before.</p>
<p>There are other methods available on the module interface to declare an AngularJS service, such as <code>service</code>, <code>value</code>, and <code>constant</code>. The <code>service</code> method will use a constructor function to create the service instance, while the <code>value</code> method will use an already created service instance that will be passed unchanged to the AngularJS injector. The <code>constant</code> method is similar with the <code>value</code> method, with the difference that it will be available during the configuration phase of the application module. The <code>factory</code> method is one of the most flexible methods, and it will be the most frequently used method in the rest of the examples from this book. It allows additional configuration to the returned service instance, and you can even keep track of data outside of the service instance, such as with the <code>playerCount</code> variable from the previous example.</p>
<blockquote>
<p>We have used a lot of directives in the examples presented so far, and most of them used the <code>ng-</code> prefix. When you take a look at the directives' documentation <a></a>pages at <a href="http://code.angularjs.org/1.2.15/docs/api">http://code.angularjs.org/1.2.15/docs/api</a>, you will notice that the directive names appear slightly different—<code>ng-app</code> is <code>ngApp</code> and <code>ng-controller</code> is <code>ngController</code>. AngularJS removes any <code>data-</code> or <code>x-</code> prefixes from the HTML markup and converts the <code>-</code>, <code>_</code>, and <code>:</code> characters to a camel case directive name. From now on, we will refer to different directives using the names from the AngularJS documentation.</p>
</blockquote>
<p>We will explore some<a></a> important<a></a> built-in directives and see how to build custom directives. Looking back at the previous example, the HTML markup seems to have been duplicated for the two players. There is a built-in directive called <code>ngRepeat</code> that allows us to remove the duplicated markup as highlighted in the next example.</p>
<p>The <code>ngRepeat</code> directive <a></a>works with a collection of objects and repeats an HTML markup section for each item in the collection. We created an array of player items in the controller that is used in the <code>ngRepeat</code> directive. The first highlighted code section shows the expression used to iterate through the collection, and the <code>div</code> element that has the directive is repeated for each item in the collection. The <code>player</code> variable defined in the <code>ngRepeat</code> expression is only available inside of the directive. The <code>ngRepeat</code> directive has its own scope that contains other directive-specific variables such as <code>$index</code>, which has been used in the next highlighted code snippet. This variable of the type <code>number</code> keeps track of the current collection item index, and there are other directive-specific Boolean variables available: <code>$first</code>, <code>$middle</code>, <code>$last</code>, <code>$odd</code>, and <code>$even</code>.</p>
<p>The example works for <a></a>HTML markup that repeats a single element. When the HTML markup that needs repeated elements has separate start and end elements, you need to use two different directive attributes. The first is <code>ng-repeat-start</code>, which is a renamed <code>ng-repeat</code> directive that needs to be used on the start HTML element. The second is <code>ng-repeat-end</code>, which does not have an expression value and is used on the HTML element that ends the markup that needs repeated elements. The previous example of the <code>body</code> element content can now be written using the <code>h2</code> element as the start of the repeated markup and the <code>h3</code> element as the end, as shown in the following code:</p>
<pre class="brush: xml;"> &lt;h1&gt;Game setup&lt;/h1&gt;
&lt;div&gt;
&lt;h2 ng-repeat-start=&quot;player in players&quot;&gt;
Player {{$index + 1}}
&lt;/h2&gt;
&lt;label&gt;Name:
&lt;input type=&quot;text&quot; placeholder=&quot;Please enter player {{$index + 1}} name&quot;
ng-model=&quot;player.name&quot; ng-focus=&quot;player.onNameFocused()&quot;&gt;
&lt;h3 ng-show=&quot;player.name&quot;&gt;Player {{$index + 1}} name is {{player.name}}.&lt;/h3&gt;
&lt;h3 ng-repeat-end ng-show=&quot;player.previousName&quot;&gt;
Previous Player {{$index + 1}} name was
{{player.previousName}}.
&lt;/h3&gt;
&lt;/div&gt;</pre>
<p>The <code>ngRepeat</code> directive example is very useful when we need to manipulate the <a></a>HTML for a specific application view. However, I can easily imagine scenarios where the HTML for a player has to be reused between different views. If there is a single player game, we want to see only one player editing form rather than two. AngularJS offers a simple but powerful solution through the <code>ngInclude</code> directive. This directive allows the referencing of a separate file that will be loaded and rendered in the current HTML view by AngularJS.</p>
<p>To introduce this directive, I had to change the HTML for the <code>ngRepeat</code> example and add a new file that contains the player HTML markup.</p>
<p>The first highlighted attribute is a new directive, <code>ngInit</code>, that evaluates an arbitrary expression. Although this directive can be used anywhere, it is best practice to only use it in the context of the <code>ngRepeat</code> directive. We use it to create a new scope property that is an alias of the <code>$index</code> variable from the <code>ngRepeat</code> directive. The reason behind this alias is to allow the reuse of the player markup in contexts where there is no enclosing <code>ngRepeat</code> directive.</p>
<p>The next highlighted <a></a>element is the <code>ngInclude</code> directive, which fetches the <a></a>referenced <code>player.html</code> file, renders it, and creates a new scope for it. The scope inherits the current <code>ngRepeat</code> iteration scope and its <code>player</code> and <code>playerIndex</code> properties. The last highlighted expression shows how the property created by <code>ngInit</code> is used in player markup.</p>http://puresourcecode.com/javascript/post/First-AngularJs-example
enrico.rossini.uk@live.comhttp://puresourcecode.com/javascript/post/First-AngularJs-example#commenthttp://puresourcecode.com/javascript/post.aspx?id=6ef11d06-21a3-445b-a410-0aa7a465012fWed, 24 Jan 2018 22:13:36 -0800AngularJsexampleservicedirectivengIncludehenryhttp://puresourcecode.com/javascript/pingback.axdhttp://puresourcecode.com/javascript/post.aspx?id=6ef11d06-21a3-445b-a410-0aa7a465012f0http://puresourcecode.com/javascript/trackback.axd?id=6ef11d06-21a3-445b-a410-0aa7a465012fhttp://puresourcecode.com/javascript/post/First-AngularJs-example#commenthttp://puresourcecode.com/javascript/syndication.axd?post=6ef11d06-21a3-445b-a410-0aa7a465012f