CODEWITHSUNDEEP
angularjswinjswin-universal-app
Sentient
Sentient

Reputation: 1112

Getting started with angular in WinJs

I'm having a hard time getting Angular to work inside a Windows Universal App. I'm using Visual Studio 2015.

I'm trying to follow the instructions here: https://github.com/winjs/angular-winjs

In the html head section I have:

<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>

<!-- angular  -->    
<script src="angular-winjs.js"></script>

When I run the app I get an error in the angular-winjs.js file:

var module = angular.module("winjs", []);

The error is that angular isn't defined.

So this could be something simple, but I'm having a hard time figuring out what the problem is.

The instructions say:

You must also add this module to your list of angular module dependencies:

angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);

I have no idea what my "list of angular module dependencies" is.. but since I can't even access angular I don't think that's the (main) problem.

Upvotes: 0

Views: 836

Answers (1)

xdvarpunen
xdvarpunen

Reputation: 356

You need WinJS libraries (ui.js, base.js and the style ui-light.css / ui-dark.css), AngularJS libraries (angular.js) and finally angular-winjs library (angular-win.js). In your code you are missing Angular library. That's why angularjs is still undefined.

Needed files to get started with angular-winjs:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>

Working sample for you to get started:

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Working sample</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
    <script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>

    <style>
        <!-- You need define yourself the styles for templates -->
        .win-listview {
            width: 600px;
            height: 300px;
            border: solid 2px rgba(0, 0, 0, 0.13);
        }

        .miniTemp {
            width: 282px;
            height: 70px;
            padding: 5px;
            overflow: hidden;
            display: -ms-grid;
        }
    </style>
</head>
<body>

    <div ng-app="workingsample" ng-controller="ratingCtrl">
        <!-- listview -->
        <div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>

        <win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
            <win-list-view-header>This is a ListView header</win-list-view-header>
            <win-item-template>
                <div class="miniTemp">
                    This list view item's rating is: {{item.data.rating}}
                </div>
            </win-item-template>
            <win-list-layout></win-list-layout>
            <win-list-view-footer>This is a ListView footer</win-list-view-footer>
        </win-list-view>
    </div>

    <script>
        angular.module("workingsample", ['winjs'])
       .controller("ratingCtrl", ['$scope', function ($scope) {
            $scope.ratings = [
            { "rating": "Too much" },
            { "rating": "Bigger than yours" },
            { "rating": "Too small yep" },
            { "rating": "Why me" },
            { "rating": "Rekt m9" }
            ];
            $scope.selection = [];
        }])
    </script>
</body>
</html>

Upvotes: 1

Related Questions