source: trip-planner-front/node_modules/angular-material/README.md@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit
  • Property mode set to 100644
File size: 5.4 KB
Line 
1This repository publishes the AngularJS Material v1.x library and localized installs
2using `npm`. You can find the component source-code for this library in the
3[AngularJS Material repository](https://github.com/angular/material).
4
5> Please file issues and pull requests against that `angular/material` repository only. Do not file
6issues here on the publishing repository.
7
8## Layouts and SCSS
9
10Included in this repository are the:
11
12* **[SCSS files](https://github.com/angular/bower-material/tree/master/modules/scss)** which are
13used to build the *.css files
14* **[Layout files](https://github.com/angular/bower-material/tree/master/modules/layouts)** which
15are used with the AngularJS Material (Flexbox) Layout API.
16
17> Note these are already included in the `angular-material.css` files. These copies are for direct
18developer access and contain IE flexbox fixes; as needed.
19
20## Installing AngularJS Material
21
22You can install this package locally with `npm`.
23
24**Please note**: AngularJS Material requires **AngularJS 1.7.2** to **AngularJS 1.8.x**.
25
26```shell
27# To install latest formal release
28npm install angular-material
29
30# To install latest release and update package.json
31npm install angular-material --save
32
33# To install from HEAD of master
34npm install http://github.com/angular/bower-material/tarball/master
35
36# or use alternate syntax to install HEAD from master
37npm install http://github.com/angular/bower-material#master --save
38# note: ^^ creates the following package.json dependency
39# "angular-material": "git+ssh://git@github.com/angular/bower-material.git#master"
40
41
42# To install the v1.2.1 version
43npm install http://github.com/angular/bower-material/tarball/v1.2.1 --save
44
45# To view all installed package
46npm list
47```
48
49## Using the AngularJS Material Library
50
51You have installed the AngularJS library, next include the scripts and
52stylesheet in your main HTML file, in the order shown in the example below. Note that NPM
53will install the files under `/node_modules/angular-material/`.
54
55```html
56<!DOCTYPE html>
57<html>
58<head>
59 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
60 <link rel="stylesheet" href="/node_modules/angular-material/angular-material.css">
61</head>
62 <body ng-app="YourApp">
63 <div ng-controller="YourController">
64
65 </div>
66
67 <script src="/node_modules/angular/angular.js"></script>
68 <script src="/node_modules/angular-aria/angular-aria.js"></script>
69 <script src="/node_modules/angular-animate/angular-animate.js"></script>
70 <script src="/node_modules/angular-messages/angular-messages.js"></script>
71 <script src="/node_modules/angular-material/angular-material.js"></script>
72 <script>
73 // Include app dependency on ngMaterial
74 angular.module('YourApp', ['ngMaterial', 'ngMessages'])
75 .controller("YourController", YourController);
76 </script>
77</body>
78</html>
79```
80
81## Using the CDN
82
83With the Google CDN, you will not need to download local copies of the distribution files.
84Instead, reference the CDN URLs to use those remote library files.
85This is especially useful when using online tools such as CodePen, Plunker, or jsFiddle.
86
87```html
88<head>
89 <!-- Angular Material CSS now available via Google CDN; version 1.2.1 used here -->
90 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css">
91</head>
92<body>
93
94 <!-- Angular Material Dependencies -->
95 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
96 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
97 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js"></script>
98 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js"></script>
99
100 <!-- Angular Material Javascript now available via Google CDN; version 1.2.1 used here -->
101 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js"></script>
102</body>
103```
104
105> Note that the above sample references the 1.2.1 CDN release. Your version will change
106based on the latest stable release version.
107
108## Unit Testing with Angular Material
109
110<br/>
111If you are using AngularJS Material and will be using Jasmine to test your custom application
112code, you will need to also load two (2) AngularJS mock files:
113
114* AngularJS mocks
115 * **angular-mocks.js** from `/node_modules/angular-mocks/angular-mocks.js`
116* AngularJS Material mocks
117 * **angular-material-mocks.js** from `/node_modules/angular-material/angular-material-mocks.js`
118
119<br/>
120
121Shown below is a karma-configuration file (`karma.conf.js`) sample that may be a useful template for
122your testing purposes:<br/><br/>
123
124```js
125module.exports = function(config) {
126
127 var SRC = [
128 'src/myApp/**/*.js',
129 'test/myApp/**/*.spec.js'
130 ];
131
132 var LIBS = [
133 'node_modules/angular/angular.js',
134 'node_modules/angular-animate/angular-animate.js',
135 'node_modules/angular-aria/angular-aria.js',
136 'node_modules/angular-messages/angular-messages.js',
137 'node_modules/angular-material/angular-material.js',
138
139 'node_modules/angular-mocks/angular-mocks.js',
140 'node_modules/angular-material/angular-material-mocks.js'
141 ];
142
143 config.set({
144 basePath: __dirname + '/..',
145 frameworks: ['jasmine'],
146
147 files: LIBS.concat(SRC),
148
149 port: 9876,
150 reporters: ['progress'],
151 colors: true,
152
153 autoWatch: false,
154 singleRun: true,
155 browsers: ['Chrome']
156 });
157};
158```
Note: See TracBrowser for help on using the repository browser.