References and Basic Markup

The first step to creating a web app with AngularJS and Wijmo is to create basic markup and include references.

Basic Markup

The basic framework of HTML markup that you use with Wijmo and Angular looks like this, which includes a model (optional) and controller (required). Here is a breakdown of the elements of this framework.

Basic Framework	Copy Code
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> <script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) {} </script> </head> <body ng-controller="MyController"> </body> </HTML>

Basic Framework

Copy Code

<!DOCTYPE HTML>
<HTML ng-app="MyApp">
<head>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["wijmo"]); 
        function MyController($scope) {}
    </script>
</head>
<body ng-controller="MyController">
</body>
</HTML>

The ng-app directive in the <HTML> element marks the page as an Angular application, and tells it which module to use, in this case, MyApp.
In a script in the <head>, we do two things:
- We create MyApp and tell it to use Wijmo. This allows us to use all of the widgets without initializing them as we normally would.
- (If we were adding a model, it would go between these two lines.)
- We create a controller, MyController, which gets data context through the $scope parameter.
In the <body> element, we use the ng-controller directive to assign MyController to the entire body of the page. This allows us to use Angular directives for our Wijmo widgets anywhere in the page. You may also assign controllers to smaller subsets of a page, for example a <div> element.

References

To use our AngularJS components, add references to jQuery, Wijmo, Angular, and the Wijmo AngularJS integration library. Note that the Angular references must follow all of the jQuery and Wijmo references. The references go inside the <head> before the script in the basic framework above.

References	Copy Code
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20161.90.min.js"></script>

References

Copy Code

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!-- Wijmo Scripts -->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js" type="text/javascript"></script>

<!-- Angular -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20161.90.min.js"></script>