Oct 06, 2015
When thinking about creating your application, you should keep Angular JS in mind. Angular JS can be used to make your application more reactive for your users, this increases the experience of the user. We will be looking at creating an Angular JS application over a series of blogs.
To get started with Angular JS in your application, you will need the Angular JS library. If you are using Visual Studio as your development environment you can use the Nuget manager to download the package. Otherwise you can simply use the website: https://angularjs.org/ to download it.
Once downloaded you need to reference it within your HTML pages that you want to use it in, as a recommendation you should include it within the body element of your page.
Once you have it referenced you can then start by implementing your Angular JS application, this is done by creating an Angular Module. Angular Modules will be our application namespace that contains a number of different components such as the controller.
We will begin by adding an empty JavaScript file. Within this file we will create our Angular JS code.
Within this file, we use JavaScript to create the module. To create a module you create a variable and set it equal to the “angular.module” function. This function requires a name and a list of dependencies. We will call it DemoApp and provide an empty list for the dependencies.
Once we have the module in place we can then create a controller, this will handle the actions the user takes on the page and react to their input. You create the controller within a module, this controller needs a name and a list of arguments. You have to use the controller function exposed by Angular JS on your previously defined module to create it.
I called my controller “DemoCtrl” and I provided the scope object as an argument. This will give you access to the data exposed by the model of your application, allowing us to set new values and retrieve current values.
For a simple demonstration I will create a new property on the scope object and display it for the user on the page. This property will be called “Technology”. And contain a value of “Angular JS”.
We now need to decorate our HTML page to use the angular application we just created. To do this, we first need to add a reference to our script file and then decorate an element with the “ng-app” attribute to implement the scope of our application, this will reference the module we created.
Within the element you just decorated with the “ng-app” attribute, you have to assign an element to use your controller, this is achieved by using the “ng-controller” attribute and will reference our controller by name.
Finally we will add some HTML elements to display the values that is retrieved from the controller within the Angular JS Application. To show information from the controller you will have to use Angular Expressions, you can recognize this by the double curly bracers “{{“ and “}}”. Within the curly bracers you use the name of the properties within the scope object, such as the “Technology” we have created.
Now your final product will have the following outcome.
How do your Excel skills stack up?
Test NowNext up:
- What Customers Want
- Deleting an undelete-able site collection
- Non-Breaking Spaces & Non-Breaking Hyphens in Word
- Creating a simple Website and User Interface with MVC - Part 1
- Welcome to the new Edge
- Courage? …I’m feeling quietly confident
- Save time by using your Document Stencil
- Creating a simple Website and User Interface with MVC - Part 2
- Create Scenarios in Excel using cell names
- The awesomeness that is AngularJS - Part 2
Previously
- Entity Framework Code-First
- Introduction to Office 365 Video
- The Aussie Meat Pie of Managing Teams
- Cascaded Dropdowns in Nintex Forms
- Create a Chart Template in Excel
- Setting up your models in MVC
- No need for meeting notes anymore!
- “If you can’t measure it…”
- The best features in Office 2016!
- Use a slicer to make better business decisions