We use AngularJS in Windows Phone 8.1 applications

In this post I will tell you how to connect and start using the popular JavaScript framework AngularJS for developing applications for Windows Phone 8.1. You can connect AngularJS to your project and start using its capabilities.

We create the project and we connect AngularJs

Create a new project for Windows Phone 8.1 in JavaScript using the Blank App template.

')
We connect AngularJS . It is available as an installation package in NuGet .
Open the NuGet Package Manager Console and execute the commands:

install-package AngularJS.Core install-package AngularJS.Animate install-package Angular.UI.UI-Router

AngularJS.Core is a library with the basic features of AngularJS.

AngularJS.Animate - animation features.

Angular.UI.UI-Router - navigation, work with views.

Angular-WinJS - to be able to use AngularJS with WinJS, you need to install this module. Unfortunately, it is not currently published as a NuGet package and we will have to download it from GitHub manually.

Add the downloaded script to the scripts folder in the project:

Making changes to the library

As soon as you try to connect the Angular libraries to your page and launch the application, a terrible, that is, an error will occur.

In accordance with the security model of Windows Phone applications, you cannot dynamically change the contents of page elements. But you can do it inside the structure

 MSApp.execUnsafeLocalFunction(function () { });

That is, in the scripts / angular.js file, you must wrap all innerHTML changes or calls to the prepend or insert .. method into this construct.

The corrected file is available on the link on Github

We use AngularJS on the application page

1. Open the default.html file, add links to AngularJS libraries.

In the body of the page we place a special container in which we will load the presentation with AngularJS:

 <div ui-view></div>

Full code of the default.html file

 <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>demo</title> <link href="//Microsoft.Phone.WinJS.2.1/css/ui-light.css" rel="stylesheet" /> <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script> <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script> <!-- Angular references --> <script src="/scripts/angular.js"></script> <script src="/scripts/angular-animate.js"></script> <script src="/scripts/angular-ui-router.js"></script> <script src="/scripts/angular-winjs.js"></script> <!-- demo references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body class="phone" > <div ui-view></div> </body> </html>

2. Create a new views folder in which we will store the views for the pages.
3. In the views folder, create the mainView.html file to display the main page.
Our main page will contain only congratulations on the past holiday and a button on the action bar.

Full code for mainView.html file

 <div class="demoView fragment"> <h1 style="font-size:2em"> {{greeting}} </h1> <win-app-bar> <win-app-bar-command icon="'accept'" label="'ok'" ng-click="ok()"></win-app-bar-command> </win-app-bar> </div>

The {{greeting}} construct will help us display the value of a variable that we define in the controller, and the confirmation button will be a button on the action bar created using WinJS.

4. Open js / default.js - the main application file, which will contain all the code and replace its contents.

Full code of the default.js file

  (function () { "use strict"; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var angular_app = angular.module('demo', ['ui.router', 'ngAnimate', 'winjs']); app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { } else { } var angularLoadedSignal = new WinJS._Signal(); angular.element(document).ready(function () { try { angular.bootstrap(document, ['demo']); angularLoadedSignal.complete(); } catch (e) { if (!(typeof e.message == 'string' || e.message instanceof String)) { throw e; } if (e.message.indexOf('[ng:btstrpd]') !== 0) { throw e; } } }); args.setPromise(angularLoadedSignal.promise); } }; app.oncheckpoint = function (args) { }; //      angular_app.controller('mainViewCtrl', ['$scope', function ($scope) { $scope.greeting = '   !'; $scope.ok = function () { var msgpopup = new Windows.UI.Popups.MessageDialog("    ,   "," "); msgpopup.commands.append(new Windows.UI.Popups.UICommand("ok", function () { })); msgpopup.showAsync(); }; }]); //,     angular_app.config(function ($stateProvider) { $stateProvider .state('mainView', { url: '/mainView', templateUrl: '/views/mainView.html', controller: 'mainViewCtrl', }); }); //  view    angular_app.constant('homeStateName', 'mainView'); angular_app.run(function (navigationSvc) { navigationSvc.goHome(); }); (function () { var NavigationSvc = function ($q, $state, adapterSvc, homeStateName) { WinJS.Navigation.addEventListener('navigating', function (args) { var targetState = args.detail.location; var angularPromise = $state.go(targetState, args.detail.state); args.detail.setPromise(adapterSvc.toWinJSPromise(angularPromise)); }); this.goHome = function () { return adapterSvc.toAngularPromise(WinJS.Navigation.navigate(homeStateName)); }; this.navigateTo = function (view, initialState) { return adapterSvc.toAngularPromise(WinJS.Navigation.navigate(view, initialState)); }; this.goBack = function () { return adapterSvc.toAngularPromise(WinJS.Navigation.back()); }; this.goForward = function () { return adapterSvc.toAngularPromise(WinJS.Navigation.forward()); } }; angular_app.service('navigationSvc', NavigationSvc); }()); angular_app.service('adapterSvc', ['$q', function ($q) { return { toAngularPromise: function (winjsPromise) { var deferred = $q.defer(); winjsPromise.then(function (value) { deferred.resolve(value); }, function (err) { deferred.reject(err); }, function (value) { deferred.notify(value); }); return deferred.promise; }, toWinJSPromise: function (angularPromise) { var signal = new WinJS._Signal(); angularPromise.then(function (value) { signal.complete(value); }, function (err) { signal.error(err); }, function (value) { signal.progress(value); }); return signal.promise; } } }]); app.start(); })();

In this code, we:

We initialize the AngularJS libraries and force the bootstrap mechanism to execute when the application page loads. More about how bootstrap in AngularJS works is described in the manual .
Create a demoViewCtrl controller in which we create a variable and handle the button event on the action bar.
We implement navigation and loading of the view into the container.
Some details about the navigation
As you know, WinJS has its own navigation library for WinJS.Navigation and you can create single page apps, where all other pages are loaded into the DOM of one main page, or use the usual navigation model and make transitions between pages.

AngularJS has navigation capabilities between views within a one-page application that are very similar to the concept of navigation in WinJS . Navigation features are available as a separate module on the AngularJS website. A popular alternative is the UI Router module (we have already installed from NuGet).

Starting using AngularJS you can choose which mechanisms (WinJS or AngularJS) you will use in your project. The only thing you need to remember is that your phone has a hardware Back button, about which AngularJS does not know anything, and so that it works, we use the AngularJS + WinJS hybrid navigation option.