AngularJS-The Introduction

 HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. AngularJS is a JavaScript framework. It is a library written in JavaScript.It can be added to an HTML page with a script tag.

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

AngularJS adds behavior to your HTML and speeds up your application’s responsiveness.

It helps you to organize your JS and is perfect for SPAs (Single Page Applications).It is easy to test also.

How AngularJS works?

In a SPA, either all necessary code “HTML, JavaScript, and CSS are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process.Data is loaded into existing page in response to new request.

Architectural Pattern 

View: Visual appearance (declarative languages).

Model: Data model of the app (JavaScript object).

Controller: Adds behavior (imperative language).

 User interacts with the view changes the model, calls the Controller.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

as shown below diagram(download from the link http://angularjs.org and give the reference of AngularJS file)

AngularJS extends HTML with ng-directives.The ng-app directive defines an AngularJS application.The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.The ng-bind directive binds application data to the HTML view.

ng- tells that is an Angular directive. It’s a built-on directive. You can also write custom ones. You can get third party ones and things like that.

ng-app is used to initialize the AngularJS application.

Directives and Data Binding

A Directive is a marker on HTML tag that tells Angular to run or reference some JavaScript code

Expressions:

AngularJS expressions bind data to HTML.AngularJS expressions are written inside double braces: {{expression}}.AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.For example, we can see in the below diagram:

The output is as:

My first expression: 10

If ng-app is removed, HTML will display the expression as it is, without solving it.

The output is as:

Without the ng-app directive, HTML will display the expression as it is, without solving it.

My first expression :{{ 5+5}}

TypeScript-How does it work?

Now we will see how to work with TypeScript in Visual Studio 2012.
TypeScript is a language for application-scale JavaScript development. This power tool adds TypeScript support to Visual Studio 2012.We can download TypeScript for Visual Studio from the below link http://www.microsoft.com/en-in/download/details.aspx?id=34790

After downloading, run the install Typescript exe (TypeScriptSetup.1.0.rtm.VS2012.exe).Double click on exe file and we will get TypeScript window.

Click on install button and then TypeScript will be installed in our system for Visual Studio 2012.
Now open Visual Studio 2012 and go to File->New->Projects.Under Templates, click on TypeScript.

Click on button Ok in New project window and then will launch TypeScript window with TypeScript syntax.

Now press F5 and then will populate first TypeScript output.

Now we can see the differences and compare the syntax between TypeScript file and JavaScript file.

TypeScript-The Basic

TypeScript is a superset of JavaScript that brings to it an additional object-oriented-like syntax familiar to .NET programmers that compiles down into JavaScript that any browser can run today.TypeScript

• is an open source project, so there’s direct input from its users.
• is a standard in its own right.
• is a proof of concept for, and therefore points to a part of the ECMAScript 6 standard.TypeScript is just JavaScript. You only need to know JavaScript to use TypeScript, and all your favorite third-party JavaScript libraries will work fine with it.

JavaScript is just TypeScript. Any valid .js file can be renamed .ts and be compiled with other TypeScript files.

TypeScript borrows from the Harmony specification. When Harmony is ratified, the TypeScript compiler can just let the new language elements alone and allow the new Harmony-compliant engines to parse your TypeScript as pure JavaScript instead.

The TypeScript compiler is itself a JavaScript file (compiled down from TypeScript). Thus it can be hosted in any browser, on any host, on any operating system if required. There’s no dedicated.

 

RAZOR-The Basic

Razor is a simple programming syntax for embedding server code in web pages.The server based code can create dynamic web contenton dynamically while a web page is written to the browser.It is based on ASP.NET and designed for creating web application.
The concept behind razor is to provide an optimized syntax for HTML generation using a code –focused templating approach with minimal trnsition between HTML and code.
Adavantages of Razor

• Razor minimizes the number of characters and keystrokes required in a file. You do not need tobother of interruption of your coding to explicitly denote server blocks within your HTML. The parser is smart enough to infer this from your code. This enables a really compact and expressive syntax which is clean, fast and fun to type.
• Razor is easy to learn and enables you to quickly be productivea nd effective with a minimum of concepts. You can use all your existing language and HTML skills.
• We made to enable developers to use their existing C#/VB language skills with Razor, and deliver a template markup syntax that enables an ainteractive HTML construction workflow with your possible language.
• Razor doesn’t require a specific tool and enables you to be in any plain old text editor like notepad.
• The new view engine implementation will support the ability to unit test views without  a controller or web-server, and can be hosted in any unit test project.
• It Supports IntelliSense.
• It Supports layouts ,an alternative to the "master page" concept in classic aspx pages

Razor Syntax

• Razor code blocks are enclosed in @{ ... }.
• Inline expressions (variables and functions) start with @
• Code statements end with semicolon.
• Variables are declared with the var keyword.
• Strings are enclosed with quotation marks.
• C# code is case sensitive.
• C# files have the extension .cshtml.