Using Angular. JS and Type. Script to Build Single Page Applications (SPA)If you are a web developer active on the social media and have read about the latest web trends, then you don’t need an introduction to Angular. JS. It is currently one of the hottest Java. Script frameworks for building Single Page Applications (SPA). Editorial Note: The latest version of Angular is Angular 4. This article uses the first version of Angular called Angular. JS which is still very widely used in projects. Angular. JS started catching the attention of many developers around the world because of its strong emphasis on code quality and testing and the ease with which one can get started with it and quickly build single page applications. Close Self Window Using Jquery Locally OwnedAngular. JS contains everything that one needs to build a full- fledged Java. Script based application, along with promoting good client- side coding practices. This article is published from the Dot. Net. Curry . NET Magazine – A Free High Quality Digital Magazine for . NET professionals published once every two months. Subscribe to this e. Magazine for Free and get access to hundreds of free tutorials from experts. In the 1. 0th edition of DNC magazine, Sumit Maitra posted an excellent article on building an app using Angular JS and ASP. A demo, code and explanation for a simple jQuery crossfade image cycler. No plugin required. Learn Web Design & Development with SitePoint tutorials, courses and books - HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design. NET MVC; you can take a look at it if you need an introduction to Angular. JS. To learn more about Angular. JS, click here Angular Tutorials. Type. Script is a language created by Microsoft, which gets compiled into Java. Script. As the name itself suggests, Type. Script brings type checking capabilities into Java. Script. Since most of us are C# developers, Type. Script looks much like a combination of Java. Script and C#. Type. Script has most of the features of Object Oriented languages like C# and Java. The language designers didn’t try to invent anything, so one doesn’t need much time to get started with Type. Script. To get started with typescript, here's an awesome tutorial Type. Exploring the relationship between JavaScript and the modern HTML DOM. Close Self Window Using Jquery Locally AdvancedScript Tutorial for Beginners. Type. Script comes with a set of primitive types: number: to represent numeric valuesstring: to represent string valuesboolean: to represent Boolean valuesany: to represent any type of value, to be used only when there are multiple possibilities. To create custom types, we need to define classes or interfaces depending on your applications need. Types can be inherited to create child types. Type inheritance in Type. Script is compiled into prototypal inheritance in Java. Script. A simple Type. Script class looks like the following. Square . The above class compiles to. Square = (function () . This may cause a question in your mind on possibility of using existing Java. Script libraries in Type. Script. Luckily, we don’t need to rewrite the libraries in Type. Script, we just need to have Type. Script declaration file for the library available. The type declaration file doesn’t define anything; it just holds declarations of all objects that the library exposes, of which most of them are interfaces. Visual Studio 2. 01. Type. Script. The file gets compiled and corresponding Java. Script file is generated as soon as the source file is saved. This Node.js tutorial explores how to use Microsoft Azure Cosmos DB to store and access data from a Node.js Express web application hosted on Azure Websites. The CSS styleable jQuery media player plugin with HTML5 support! The Original Tutorial Starts Here: Remember: You don’t have to follow these steps if you’ve gone through the steps above in using the plugin. We also get a nice split view to see the Type. Script and Java. Script equivalent side- by- side. If you need some more inputs on Type. Script, check out Hello Type. Script – Getting Started. Building the One. Stop. Tech. Videos Sample App using Angular. JS and Type. Script. Now that we got some background on Type. Script and Angular. JS, let’s discuss about using Type. Script to write an Angular. JS application. Let’s set up a project in Visual Studio 2. Open Visual Studio and create a new Empty Web Project named One. Stop. Tech. Vids. As the name suggests, the application is used to maintain list of training programs offered by a Video- based virtual training company. To the project, add the following Nu. Get packages: Angular. JS. Core. Angular. JS. Route. Bootstrap. Angular. JS. Type. Script. Definitely. Typed. The fourth package mentioned in the above list is the type declaration file for Angular. JS. Creating an ASP. NET Web API service to serve data. As the data resides on the server, let’s create an ASP. NET Web API service to serve data to the application. Since the focus of the article is to use Angular. JS and Type. Script to build SPA’s, I am going to store the data in the memory in form of static collections. Let’s create two simple classes first: Tech. Video and Category to represent structure of the data. Introduces the framework and. They are as follows. Categories. Controller : Api. Controller. . I am not going to cover the Edit video view here, but the code is made available in the downloadable file at the end of this article. I am leaving it to the readers to read the code and understand the functionality of the page. To start with, add a new Type. Script file to the project and add references to Angular and Angular route to the file. A module in Type. Script is similar to a namespace in C#. It can hold definitions of a number of types. While compiling to Java. Script as a function, you can also add some logic directly to the module, but amount of logic should be minimized. Statement for creating module remains the same in Type. Script as in plain Java. Script. This function is going to be called immediately and it is not going to be instantiated. In the context of Type. Script, the function can be defined as one of the following: A class with a constructor and with no other functional components. It can even be a class with a static function and the static function would be invoked while registering the config block. Let’s use the first approach to define the config. We will use the second approach later for another component. The config block needs $route. Provider for registering routes of the application. We can use the config. Following is our config block. Config . A factory is a function that returns an object. In general, Java. Script implementation of a factory looks like the following. Let’s rephrase the factory as follows to make it easier to create it in the form of a class. A skeleton of it looks like the following. My. Class . Also, as we will be dealing with custom objects for Video and Category, let’s create simple classes to hold the properties that we need in these objects. I prefer creating a separate module for creating the custom types, this keeps the declarations and the definitions separated. Following is a module with Video and Category classes. Extensions . We will set values to these fields in either constructor or in the methods. Following is the factory class with the required private fields, constructor and the static factory method. Tech. Vids. Data. Svc . The private fields, videos and categories would be used to cache data locally and use them to serve data to the application whenever needed. Let’s start adding logic to the factory by adding a method to fetch all videos. This method will make a request to the API service if the videos are not already loaded. Otherwise, it would return the cached data. In both cases, the data would be wrapped inside a promise to make behaviour of the method consistent. When it fetches data from the service, it updates the local cache with the data received. It is good to provide an option to forcefully refresh data from the server when needed; it can be done by accepting a Boolean value to this method. Following snippet shows the implementation. All. Videos(fetch. From. Service ? Once the API call is successful, the video object is added to the local cache after assigning id of the video received in response to the API call. This is done to keep the local copy consistent with the copy on the server. Following is the method that adds a video. You can take a look at them in the source code. Creating Main page and Menu. The page we are going to design has a menu on the left side with links to browse videos by categories or add a new video. At the centre, the page would contain the ng- view directive, the place where templates of other pages would be rendered. Following is the mark- up in the main page: We need a small Controller to serve data about categories that are used to generate a list of links on the left menu. In Angular, a controller gets instantiated. So, we can simply create a class and register it as a controller, we don’t need to follow any conventions like we did in cases of the factory and the config blocks. But the objects used for data binding have to be made available on the Scope. A general interface type for scopes exists in the Angular type declaration file, but we need to create a child type to accommodate the new objects to be added to the scope specific to the controller. Add the following interface to the Extensions module created above. ITech. Vids. Category. Scope extends ng. IScope . It just makes a call to the method in the service and assigns the obtained results to scope. As you see in the above screenshot, the view consists of a list of divs that show details of the videos with an option to change rating of the video and a link for edit/delete. The voting buttons cannot be enabled for any value of rating. The buttons should prevent the user from going below 1 and going above 5. This can be achieved easily using Angular’s data binding. Following is the mark- up in the video list view: This view is created to act in two ways: one is to display all videos and other is to display videos based on the category received in the URL. As we already saw, we need to create a scope type specific to this view. Following is the implementation. Tech. Vids. List. Ctrl . We will use Angular’s data validation features to validate the inputs and display the error messages. The list of validations performed on this page is: Video should have a title and the title shouldn’t be already assigned to any of the existing videos (custom validation directive, will be discussed later)A category should have been selected. Author’s name should be entered and it shouldn’t have numbers or special characters. Video must have a description with at least 5.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
August 2017
Categories |