https://github.com/opteo/angular-container
Vue component for embedding Angular.js containers within your application
https://github.com/opteo/angular-container
angularjs component vuejs
Last synced: about 1 year ago
JSON representation
Vue component for embedding Angular.js containers within your application
- Host: GitHub
- URL: https://github.com/opteo/angular-container
- Owner: Opteo
- License: mit
- Created: 2018-08-24T11:20:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-04T10:52:42.000Z (almost 8 years ago)
- Last Synced: 2025-01-29T07:30:32.739Z (over 1 year ago)
- Topics: angularjs, component, vuejs
- Language: Vue
- Size: 184 KB
- Stars: 1
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.org/package/angular-container)
# Angular Container
Here at Opteo, we recently undertook the process of updating our large, Angular.js-based, front-end application (composed of many controllers, services and directives) to Vue. Migrating our entire application was expected to take several weeks (which later became months), so we built the angular-container Vue component as a simple way to use our existing Angular pages within our new Vue-based app.
### Features
- Use existing Angular based controllers/services/directives within `.vue` components
- Allows for an easier migration process to Vue when working with a large existing Angular codebase
- Can be lazily loaded for only pages which require Angular
### Notes:
By default, non curly braces are used for rendering angular-container `$scope` variables, and instead square brackets are used (this can be overwritten).
The default is due to Vue using curly braces for data binding, which causes mounting issues and conflicts.
### Installation
An installation of Angular.js is required for this component to work correctly. Install via yarn or npm:
```bash
yarn add angular angular-container
```
### Example
```vue
[[ item ]]
This users the "blue" directive
{{ hello }}
import AngularContainer from "angular-container"
export default {
name: "User",
data() {
return {
hello: "world",
}
},
mounted() {
const angularContainer = this.$refs.ng
angularContainer.init() // Instantiate the Angular.js instance after Vue has mounted
const angularInstance = angularContainer.getInstance()
/* Use controllers, services and directives that you need */
angularInstance.service("userService", ["$injector", ($injector) => {
return {
getSomeData() {
return fetch("https://example.com/api/")
}
}
}])
// Controller
angularInstance.controller("userCtrl", ["$scope", "userService", ($scope, userService) => {
$scope.items = [1, 2, 3, 4, 5]
$scope.addItem = () => $scope.items.push(Math.random())
const data = await userService.getSomeData()
}])
// Directive
angularInstance.directive("blue", () => {
return {
restrict: "E",
transclude: true,
template: `<span style="color:blue;" ng-transclude></span>`
}
})
},
components: {
AngularContainer,
}
}
```